extjs4 - ExtJS 4.2 - Bind Grid to FieldSet - FieldSet is Not Updating - MVC -

i have grid populates service call (soap/xml) store. grid populates fine; however, when select item in grid, trying bind value fieldset.

when selecting item in grid, debug , see model selected item has been updated properly, when loadrecord, fieldset not update. not errors, fieldset not updating.

here sample code. trying minimize as possible because using mvc , application starting 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 store dynamically... fyi. no issues loading data or displaying in grid.

i have several viewport using have multiple pages. in controller, creating new viewport , adding main panel contains grid , 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 items 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, have controller (i removed bunch of stuff not needed posting) on init has listener selectionchange on 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 see model has correct selected item data, , records correct well. not errors when doing:

this.getphonecallnoteview().loadrecord(records[0]); 

here data looks when debug method gridselectionchange. can see records looks good, , model looks (i edited personal info did not want displayed on screenshot):

however, callnotedesc field not displaying notes. idea going on , how can bind grid notes fieldset note?

thanks

ext.form.fieldset not have method loadrecord, ext.form.panel does.

i'd need make ref form , change this:

this.getphonecallnoteview().loadrecord(records[0]); 

to this:

this.getphonecallsview().loadrecord(records[0]);