ExtJS 4 grid.Panel how to use dataIndex of a sub-e

Question

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:

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

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

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

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

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?

Answer 1

You could use the render function of the column:

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

Answer 2

The proper way to do this is by using a mapping.

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

Configuring the field like so:

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

Will give you a field named gender that has been extracted out of the proper objects, etc

Answer 3

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.