ExtJS 4 grid.Panel如何使用子元素的dataIndex

Question

我想在ExtJS網格中顯示數據。我主要工作，但在我的數據數組中，我有一個數組包含額外的數據（名爲'額外'）。我需要顯示從該子陣列領域：

下面是一些例子來的數據從我的服務器回給ExtJS的（直接代理） - 這是一個記錄：

{"type":"rpc","tid":6,"action":"EncounterService","method":"getRecords","result":[{"id":"20","addedDate":"2011-09-22 11:02:04","clientID":"19","extra":{"gender":"M"}}]} 

在我Ext.grid .Panel，我有了一個模型，它看起來像這樣的店鋪集：

Ext.define('ESDB.model.Encounter', { 
    extend: 'Ext.data.Model', 
    fields: ['id','addedDate','clientID','extra'] 
}); 

最後，我Ext.grid.panel，我列定義：

this.columns = [ 
      {header: 'id', dataIndex: 'id', flex: 1} 
       {header: 'gender', dataIndex: 'extra.gender', flex: 1} 
    ] 

id將顯示 - 與基本'result'數組中的任何其他字段一樣。但是，我'extra.gender'不起作用。我如何添加一列，並讓它顯示'result'數組對象中'extra'數組對象的性別行？

Answer 1

據我所知，Ext不支持那種嵌套的數據。您可以擴展模型並覆蓋get/set方法來支持這一點。以下是如何重寫get方法的示例。

var model = Ext.define("Ext.data.reader.SomeModel", { 
    extend: 'Ext.data.Model', 
    fields: [ 
     {name: 'name'}, 
     {name: 'extra.gender'} 
    ], 
    get: function(field){ 
     if (field.indexOf('.') !== -1) { 
      var parts = field.split('.'); 
      var value = Ext.data.Model.prototype.get.call(this, parts[0]); 

      return Ext.isObject(value) ? value[parts[1]] : undefined; 
     } 
     return Ext.data.Model.prototype.get.call(this, field); 
    } 
}) 

Set包含更多代碼，但覆蓋仍然很簡單。

Answer 2

正確的做法是使用映射。

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Field-cfg-mapping

配置領域，像這樣：

 {name: 'gender', mapping: 'extra.gender'} 

會給你在已提取出合適的對象的字段中指定性別等

Answer 3

您可以使用渲染功能的列：

this.columns = [ 
{ 
    flex: 1, 
    header: 'gender', 
    dataIndex: 'extra', 
    renderer: function(extra){ 
     return extra.gender; 
    } 
}]