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

【问题标题】：ExtJS 4 grid.Panel how to use dataIndex of a sub-elementExtJS 4 grid.Panel如何使用子元素的dataIndex
【发布时间】：2012-01-07 22:49:54
【问题描述】：

我正在尝试在 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 将显示 - 基础“结果”数组中的任何其他字段也将显示。但是，我的“extra.gender”不起作用。如何添加一列并让它在我的“结果”数组对象中显示“额外”数组对象中的性别行？

【问题讨论】：

标签： extjs multidimensional-array grid

【解决方案1】：

正确的方法是使用映射。

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

像这样配置字段：

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

将为您提供一个名为性别的字段，该字段已从适当的对象等中提取出来

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

据我所知，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 包含更多代码，但覆盖起来还是很简单的。

【讨论】：