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

Question

本主题已在Web上多次讨论过，但所有主题均无助于我解决问题。 我的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

问题是您的商店绑定到网格一无所知地区。它存储基金。所以你不能要求一个列映射到不在商店中的数据属性。 商店是基金记录的平面清单。当然，个人基金会本身可能知道它所属的地区，但包含基金列表的商店却不知道。

怎么办？

需要发生的事情是将客户端的数据结构展平。为什么？因为网格是平坦的。如果你每个基金有多个地区 - 那么我们会谈论一个不同的解决方案。

如何做到这一点？

如果你控制这个应用程序的服务器端，然后添加一个区域字段到基金对象，那么你的数据集是简单，直接，更重要的是平坦的。如果您不能（或不想）更改服务器端，则可以更改客户端模型mapping。基本上你会改变你的基金模型是这样的：

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

你看我们在那里做了什么？我们将区域数据压缩到基金记录中。现在，您的商店将不会按名称访问地区名称数据。

好运，

德米特里。