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

你看我們在那裏做了什麼？我們將區域數據壓縮到基金記錄中。現在，您的商店將不會按名稱訪問地區名稱數據。

好運，

德米特里。