EXTJS 4 Json在网格面板中嵌套数据

Question

这个主题已在网上多次讨论,但所有主题都没有帮助我解决我的问题.我的javascript代码接收JSON嵌套数据.所有JSON数据1级数据都在网格面板中转录,但所有子数据都没有.我尝试了很多方法,但不可能.这就是我要求你帮助我的原因.

我的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"
    }
   }]
} 

我的型号:

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'     
    }]


});  

}

我的商店和网格面板:

    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

问题是您绑定到网格的商店对区域一无所知.它存储基金.因此,您不能要求列映射到不在商店中的数据属性.该商店是基金记录的平面清单.确保个别基金本身可能知道它所属的地区,但包含基金清单的商店却不知道.

该怎么办？

需要做的是在客户端扁平化您的数据结构.为什么？因为网格是平的.如果每个基金有多个区域 - 那么我们将讨论一个不同的解决方案.

怎么做？

如果您控制此应用程序的服务器端,然后将一个Region 字段添加到Fund对象,那么您的数据集很简单,直接且更重要的是平坦.如果您不能(或不想)更改服务器端,则可以更改客户端模型映射.基本上你会将你的基金模型改为这样的:

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

你看我们在那里做了什么？我们将地区数据扁平化为基金记录.现在,您的商店在按名称访问地区名称数据时没有任何问题.

祝好运,

梅德.