ストアからのサービス呼び出し (SOAP/XML) から生成されるグリッドがあります。グリッドは問題なく表示されます。ただし、グリッドで項目を選択すると、その値を FieldSet にバインドしようとしています。
グリッドで項目を選択してデバッグすると、モデルで選択した項目が適切に更新されていることがわかりますが、loadRecord を実行しても FieldSet は更新されません。エラーは発生しませんが、FieldSet は更新されません。
これが私のサンプルコードです。MVC を使用していて、アプリケーションが大きくなり始めているため、可能な限り最小化しようとしています。
PhoneCallsModel.js -
Ext.define('DG.model.PhoneCallsModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'employeeSsn'},
{name: 'callRsn'},
{name: 'callDt'},
{name: 'callType'},
{name: 'callFor'},
{name: 'callerName'},
{name: 'callNoteDesc'}
]
});
PhoneCallsStore.js -
Ext.define('DG.store.PhoneCallsStore', {
extend: 'Ext.data.Store',
config: {
storeId: 'phoneCallsStore',
model: 'DG.model.PhoneCallsModel',
autoLoad: false
},
proxy: {
type: 'memory',
reader: {
type: 'xml',
root: 'return',
record: 'contents',
employeeSsn: '@employeeSsn',
callRsn: '@callRsn',
callDt: '@callDt',
callType: '@callType',
callFor: '@callFor',
callerName: '@callerName',
callNoteDesc: '@callNoteDesc'
}
}
});
私はストアを動的に読み込みます...参考までに。データの読み込みやグリッドへの表示に問題はありません。
複数のページを持つために使用しているViewPortがいくつかあります。私のコントローラーでは、新しい ViewPort を作成し、Grid と FieldSet フォームを含むメイン パネルを追加しています。
SearchCommand.js -
Ext.define('DG.controller.SearchCommand', {
extend: 'Ext.app.Controller',
init: function () {
this.control({
'searchView button': {
searchData: this.doSearch }
});
},
doSearch: function (caseID) {
if (caseID) {
Ext.create(Ext.container.Viewport, {
requires: [
'DG.view.PhoneCallsDataGrid',
'DG.view.PhoneCallNoteView'
],
items: [
{
xtype: 'phoneCallsView'
}
]
});
}
}
});
PhoneCallsView.js -
Ext.define('DG.view.PhoneCallsView', {
extend: 'Ext.form.Panel',
alias: 'widget.phoneCallsView',
renderTo: Ext.getBody(),
height: 800,
border: 0,
bodyPadding: 5,
layout: 'column', // Specifies that the items will now be arranged in columns
frame: true,
fieldDefaults: {
labelAlign: 'left',
msgTarget: 'side'
},
items: [
{
x: 10,
y: 177,
xtype: 'phoneCallsDataGrid',
itemId: 'getDataGridSelection',
height: 225,
width: 1175,
action: 'getSelectedItem'
},
{
x: 10,
y: 225,
xtype: 'phoneCallNoteView',
height: 200,
width: 1175
},
{
x: 10,
y: 480,
xtype: 'button',
itemId: 'getDataButton',
text: 'Refresh',
action: 'getData'
}
]
});
PhoneCallsDataGrid.js -
Ext.define('DG.view.PhoneCallsDataGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.phoneCallsDataGrid',
store: 'PhoneCallsStore',
title: 'Phone Call List',
columnLines: true,
border: false,
selType: 'rowmodel',
loadMask: true,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
initComponent: function () {
this.columns = [
{header: 'Case SSN', dataIndex: 'employeeSsn'},
{header: 'Call Reason', dataIndex: 'callRsn'},
{header: 'Call Receive Date', dataIndex: 'callDt'},
{header: 'Call Type', dataIndex: 'callType'},
{header: 'Call For', dataIndex: 'callFor'},
{header: 'Caller Name', dataIndex: 'callerName'},
{header: 'Callback Number', dataIndex: 'callbackNo'},
{text: 'Notes', header: 'Notes', dataIndex: 'callNoteDesc', width: 475,
editor: {
xtype: 'textfield',
allowBlank: false
}
}
];
this.callParent(arguments);
}
});
PhoneCallNoteView.js -
Ext.define('DG.view.PhoneCallNoteView', {
extend: 'Ext.form.FieldSet',
alias: 'widget.phoneCallNoteView',
xtype: 'form',
margin: '0 0 0 10',
title: 'Phone Call Details',
defaults: {
width: 1100
},
defaultType: 'textfield',
items: [
{
id: 'callNoteDesc',
fieldLabel: 'Note',
name: 'callNoteDesc'
}
]
});
今、私はコントローラーを持っています（この投稿に必要のないものをたくさん削除しました）。init には、phoneCallsDataGrid の selectionchange のリスナーがあります。
PhoneCallsCommand.js -
Ext.define('DG.controller.PhoneCallsCommand', {
extend: 'Ext.app.Controller',
stores: ['PhoneCallsStore'],
models: ['PhoneCallsModel'],
views: ['PhoneCallsView',
'PhoneCallsDataGrid',
'PhoneCallNoteView'],
refs: [
{
ref: 'phoneCallNoteView',
selector: 'form'
}
],
init: function () {
this.control({
'phoneCallsDataGrid': {
selectionchange: this.gridSelectionChange,
viewready: this.onViewReady
}
});
},
gridSelectionChange: function (model, records) {
debugger;
if (records[0]) {
this.getPhoneCallNoteView().loadRecord(records[0]);
}
},
onViewReady: function (grid) {
debugger;
grid.getSelectionModel().select(0);
}
});
gridSelectionChange では、モデルに正しい選択項目データがあり、レコードも正しいことがわかります。以下を実行してもエラーは発生しません。
this.getPhoneCallNoteView().loadRecord(records[0]);
メソッド gridSelectionChange をデバッグすると、データは次のようになります。レコードがきれいに見え、モデルもきれいに見えることがわかります (スクリーンショットに表示されたくない個人情報を編集しました)。
ただし、callNoteDesc フィールドにはメモが表示されません。何が起こっているのか、どのようにグリッド ノートからフィールドセット ノートに適切にバインドできるのでしょうか?
ありがとう