ExtJS 4 grid.Panel如何使用dataIndex的一个子元素 [英] ExtJS 4 grid.Panel how to use dataIndex of a sub-element

问题描述

我正在ExtJS网格中显示数据。我有它主要工作，但在我的数据数组中，我有一个包含附加数据的数组（名为'extra'）。我需要从这个子数组中显示字段：

I am trying to display data in an ExtJS grid. I have it mostly working, but in my array of data, I have an array containing additional data (named 'extra'). I need to display fields from this sub-array:

这是从我的服务器回到ExtJS（Direct Proxy）的一些示例数据 - 这是一个记录： / p>

Here is some example data coming back from my server in to ExtJS (Direct proxy) - this is one record:

{"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中，我有一个商店设置有一个如下所示的模型：

In my Ext.grid.Panel, I have a Store set that has a model that looks like this:

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

最后，我的Ext.grid.panel，我的列被定义：

Finally, my Ext.grid.panel, my columns are defined:

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

该ID将显示 - 基本result数组中的任何其他字段也将显示。但是，我'extra.gender'不工作。如何添加列，并从我的'result'数组对象中的'extra'数组对象显示性别行？

The id will display - as will any other field in the base 'result' array. However, I the 'extra.gender' does not work. How can I add a column and have it display the gender row from the 'extra' array object within my 'result' array object?

推荐答案

据我所知，Ext不支持那种嵌套数据。您可以扩展model并覆盖get / set方法来支持这一点。以下是如何覆盖get方法的示例。

As far as I know Ext not support that kind of nested data out of box. You can extend model and override get/set methods to support this. Below is example of how you can override get method.

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 contains more code, but it's still quite simple to override.

这篇关于ExtJS 4 grid.Panel如何使用dataIndex的一个子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！