ExtJS 4.2 - How to map array to a model field and display dynamically on a grid column?

Question

I have this json data:

 { id: 1, name: 'something', description: 'somethingsomething', customers: [{ id: 1, username: 'cust1' }, { id: 2, username: 'cust2' }] }

While I have no problems displaying the first three fields on the gridpanel, I however have an issue retrieving the array object for the customers field. My model goes like this:

 fields: [ 'id', { name: 'name', sortType: Ext.data.SortTypes.asUCString }, 'permanent', { name: 'description', Type: Ext.data.SortTypes.asUCString }, { name: 'customers', Type: Ext.data.SortTypes.asUCString }, { name: 'username', Type: Ext.data.SortTypes.asUCString, mapping: 'customers[0].username' } ]

When I try to access customers[0].username , it only retrieves the ones on that specified index. Removing the index number returns undefined as I assume it is looking for what index to return from. How do I properly retrieve all of customers: [] and display it to my grid where it is structured as:

 { xtype: 'gridpanel', store: oStore, viewConfig: { loadMask: false, enableTextSelection: true }, hideHeaders: false, bodyBorder: true, columns: [{ text: 'Customer', dataIndex: 'username', flex: 1 }, { header: '', xtype: 'actioncolumn', itemId: 'remove-player-btn', width: 50, sortable: false, resizable: false, menuDisabled: true, items: [{ icon: 'resources/img/x.png', tooltip: 'Remove Player', scope: oMe }], editor: { xtype: 'text', name: 'deleteRow' } }] }

Answer 1

You can use convert function available in model.This convert function is used for some calculation purpose & map response data for our needs.For example I will map username as below:

fields: [
{
  name:'username',
  convert:function(value,model)
  {
    return model.data.customers.username;
  }
}
]

Use same technique for id field.Reply if any issues.