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


});  

}

我的商店＆amp;网格面板：

    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对象，那么您的数据集很简单，直接且更重要的是平坦。如果您不能（或不想）更改服务器端，则可以更改客户端模型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'}     
    ]
    ....
});

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

祝你好运，

梅德。

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

1 个答案: