Question

Using Ext JS 4.1….

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?

Request.js

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' }
   }
});

PointOfContact.js

Ext.define('PointOfContact', {
  extend: 'Ext.data.Model',
  fields: [
    {name: 'id', type: 'int'},
    {name: 'fullName', type: 'string'},
    {name: 'email', type: 'string'},
    {name: 'phone', type: 'string'}
  ]
});

Requests.js

Ext.define('Requests', {
  extend: 'Ext.data.Store',
  model: 'Request',
  autoLoad: true
});

RequestsView.js

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}
   ]
});

So in the console I see the values for project, purpose, status and additionalInfo but I get “undefined” for pointOfContacts.

Any suggestions?

UPDATE WITH FINAL WORKING CODE:
Here is the working code I used to retrieve the pointofContacts and load a grid on my form panel with the pointOfContacts

...
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');
}
....

Answer 1

Has many associations are not parsed in to associated records by default. Especially for the grid – as that is supposed to be a flat data view. Model docs show you how to setup associations but don’t say anything about creating instances for you 🙂
There are links to usage of has many (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.association.HasMany) from the Model docs. Unfortunately the usage is not what you expect it to be. Essentially it is designed to fetch the records on demand by calling their store to load.