Question

我正在尝试在ExtJS网格中显示数据。我主要使用它，但在我的数据数组中，我有一个包含其他数据的数组（名为＆＃39; extra＆＃39;）。我需要显示这个子数组中的字段：

以下是从我的服务器返回到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中，我有一个Store集，其模型看起来像这样：

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 - 基本结果＆＃39;中的任何其他字段也将显示阵列。但是，我是'extra.gender＆＃39;不起作用。如何添加列并让其显示“＆extra”＆＃39; extra＆＃39;我的结果中的数组对象＆＃39;数组对象？

Answer 1

执行此操作的正确方法是使用映射。

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

像这样配置字段：

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

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

Answer 2

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

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

Answer 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包含更多代码，但覆盖仍然非常简单。

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

3 个答案: