StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhere's my EXT JS 4 model data?
text
Body
copied!<p>Using Ext JS 4.1....</p> <p>I have a grid that displays a bunch of Model instances, although only some of the fields are displayed. I then have a double-click listener where I would like to load the entire record into a form for editing. In the double-click listener I do not see the data in my hasMany association although the json data is being returned according to Firebug's Net display where I see the response from the server call. Is there something wrong with my model or am I going about this wrong?</p> <p>Request.js</p> <pre><code>Ext.define('Request', { extend: 'Ext.data.Model', requires: ['PointOfContact'], fields: [ {name: 'id', type: 'int'}, {name: 'project', type: 'string'}, {name: 'purpose', type: 'string'}, {name: 'status'}, {name: 'additionalInfo', type: 'string'} ], hasMany: [{ model: 'PointOfContact', name: 'pointOfContacts', foreignKey: 'id', associationKey: 'pointOfContacts' }], proxy: { type: 'rest', url: '/web/project/rest/request/', reader: { type: 'json' }, writer: { type: 'json' } } }); </code></pre> <p>PointOfContact.js</p> <pre><code>Ext.define('PointOfContact', { extend: 'Ext.data.Model', fields: [ {name: 'id', type: 'int'}, {name: 'fullName', type: 'string'}, {name: 'email', type: 'string'}, {name: 'phone', type: 'string'} ] }); </code></pre> <p>Requests.js</p> <pre><code>Ext.define('Requests', { extend: 'Ext.data.Store', model: 'Request', autoLoad: true }); </code></pre> <p>RequestsView.js</p> <pre><code>Ext.define('RequestsView', { extend: 'Ext.grid.Panel', title: 'All Requests', store: 'Requests', viewConfig: { singleSelect: 'true', listeners: { itemdblclick: function(dataview, record, item, index, e) { console.log(record.get('project')); console.log(record.get('purpose')); console.log(record.get('status')); console.log(record.get('additionalInfo')); console.log(record.get('pointOfContacts')); var comp = Ext.ComponentQuery.query('requestForm'); comp[0].getForm().loadRecord(record); var mainPanel = Ext.ComponentQuery.query('mainpanel'); mainPanel[0].getLayout().setActiveItem('requestForm'); } } }, columns: [ {header: 'Project', dataIndex: 'project', flex: 1}, {header: 'Purpose', dataIndex: 'purpose', flex: 1}, {header: 'Status', dataIndex: 'status', flex: 1} ] }); </code></pre> <p>So in the console I see the values for project, purpose, status and additionalInfo but I get "undefined" for pointOfContacts.</p> <p>Any suggestions?</p> <p><em><strong>UPDATE WITH FINAL WORKING CODE:</em></strong> Here is the working code I used to retrieve the pointofContacts and load a grid on my form panel with the pointOfContacts</p> <pre><code>... itemdblclick: function(dataview, record, item, e) { var comp = Ext.ComponentQuery.query('requestForm'); comp[0].getForm().loadRecord(record); Ext.getCmp('pocGrid').reconfigure(record.pointOfContacts()); var mainPanel = Ext.ComponentQuery.query('mainpanel'); mainPanel[0].getLayout().setActiveItem('requestForm'); } .... </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload