I have a Grid that populates from a service call (SOAP/XML) from a Store. The Grid populates fine; However, when I select an item in the Grid, I am trying to Bind that value to a FieldSet.
When selecting the item in the Grid, I debug and I see that the Model selected item has been updated properly, but when I do a loadRecord, the FieldSet does not update. I do not get any errors, but the FieldSet is not updating.
Here is my sample code. I am trying to minimize it as much as possible because I am using MVC and my application is starting to get large.
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'
}
}
});
I load the Store dynamically... just an FYI. No issues loading the data or displaying it in the Grid.
I have several ViewPort that I am using to have multiple pages. In my Controller, I am creating a new ViewPort and adding the main Panel that contains the Grid and the FieldSet form.
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'
}
]
});
Now, I have a Controller (I removed a bunch of stuff not needed for this posting) that on init it has a listener for selectionchange on the phoneCallsDataGrid:
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);
}
});
On gridSelectionChange I see the model has the correct selected item data, and the records is correct as well. I do not get any errors when doing:
this.getPhoneCallNoteView().loadRecord(records[0]);
Here is what the data looks like when I debug the method gridSelectionChange. You can see that the records looks good, and also the model looks good (I edited some personal info I did not want displayed on the screenshot):
However, the callNoteDesc field is not displaying the Notes. Any idea what is going on and how I can Bind properly from the Grid Notes to the FieldSet Note?
Thanks
