EXTJS 4 Json nested data in grid panel

Question

This topic has been discussed several times on the web but all subjects none helped me solve my problem. My javascript code receives the JSON nested data. All JSON data Level 1 data are transcribed in the grid panel but all child data none. I have tried so many ways but impossible. That's why I'm asking you to help me please.

My JSON:

{
  "success":true,
  "error":false,
  "redirectUrl":null,
  "fund":[{
    "cat_id":1,
    "catname":"Europe OE Japan Large-Cap Equity",
    "region":{
      "region_id":2,
      "region_name":"JAPAN"
    }
    },{
    "cat_id":2,
    "catname":"Europe OE Europe Large-Cap Growth Equity",
    "region":{
      "region_id":1,
      "region_name":"EUROPE"
    }
   }]
} 

MY model:

var Recommended = new function() {

this.DataModel = function() {

Ext.define('Fund', {

    extend: 'Ext.data.Model',

    fields: [{
    name: 'catname',     
    type: 'string'
    },{
    name: 'cat_id',     
    type: 'int'     
    }],
    proxy :{
    type: 'rest',
    url: application +'directory/function',
    reader: {
        type: 'json',
        root: 'fund'

    }
    },
    associations: [{
    type: 'hasOne', 
    model: 'Region',
    primaryKey: 'region_id',
    name:'region'
    }]

});     

Ext.define('Region', {
    extend: 'Ext.data.Model',
    fields: [{
    name: 'region_name',       
    type: 'string'
    },{
    name: 'region_id',       
    type: 'int'     
    }]


});  

}

My Store & grid Panel:

    this.JSONstore = function() {

var storeRecommended;


storeRecommended = Ext.create('Ext.data.Store', {
    model: 'Fund',
    autoLoad:true,
    groupField: 'region_name'
});     




var colModel =
[
{
    text: 'REGION', 
    width: 200,
    dataIndex: 'region_name',
    name:'region_name',
    mapping:'region.region_name'

},{
    text: 'MORNINGSTAR', 
    width: 300,
    dataIndex: 'catname',
    name:'catname'  
}       


];

var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
    groupHeaderTpl: 'Classe: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
    hideGroupedHeader: false
});


var grid = Ext.create('Ext.grid.Panel', {
    renderTo: 'recommendedlists',
    collapsible: true,
    iconCls: 'icon-grid',
    frame: true,
    store: storeRecommended,
    width: 1200,
    height: 400,
    title: 'Test',
    resizable: true,
    features: [groupingFeature],
    columns: colModel,
    fbar  : ['->', {
    text:'Clear Grouping',
    iconCls: 'icon-clear-group',
    handler : function(){
        groupingFeature.disable();
    }
    }]
  });
   }

   this.initControlsOnload = function() {
   Recommended.DataModel();
   Recommended.JSONstore();
   }    
} // close Recommended function

Answer 1

The problem is your store bound to the grid knows nothing about Regions. It stores Funds. So you can't ask for a column to map to a data property that's not in the store. The store is flat list of Fund records. And sure an individual Fund itself might know about the Region it belongs to, but the store containing a list of funds does not.

What to do?

What needs to happen is flattening out of your data structure on the client side. Why? Because the grid is flat. If you had multiple regions per fund - then we would be talking about a different solution.

How to do that?

If you control the server side of this app then add a Region field to the Fund object, then your data set is simple, straight forward and more importantly flat. If you can't (or don't want to) change the server side, then you can change the client side Model mapping. Essentially you would change your Fund model to something like this:

Ext.define('Fund', {
    extend: 'Ext.data.Model',
    fields: [
      { name: 'catname',     type: 'string' },     
      { name: 'cat_id',      type: 'int' },
      { name: 'region_name', type: 'string',
          mapping: 'region.region_name'},
      { name: 'region_id',   type: 'int',
          mapping: 'region.region_id'}     
    ]
    ....
});  

You see what we did there? We flattened the Region data into the Fund record. And now your store will have no problems accessing Region name data by name.

Good Luck,

Dmitry.