ExtJS 4网格.说明如何使用子元素的dataIndex

Question

我试图在ExtJS网格中显示数据。我有它主要工作，但在我的数据数组中，我有一个包含额外数据的数组(名为'extra')。我需要显示这个子数组中的字段:

这里是一些示例数据从我的服务器返回到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。面板，我有一个Store集合，它的模型是这样的:

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

最后，我的Ext.grid。面板，我的列定义:

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

id将会显示-就像基本'结果'数组中的任何其他字段一样。然而，我是额外的。性别并不起作用。我如何添加一列，并让它显示性别行从"额外"数组对象在我的"结果"数组对象?

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包含更多的代码，但仍然很容易重写