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