How to display Nested model in Grid Panel

[senthurpandian]

Hi,

Problem: Access 'one to one' relationship model attributes in Grid.
Dot notation is not working in Grid panel.

Data:

{
    "data": [
        {
            "name": "tom",
            "type": {
                "animal": "cat",
                "primaryFood": "milk"
            }
        },
        {
            "name": "jerry",
            "type": {
                "animal": "mouse",
                "primaryFood": "cheese"
            }
        }
    ]
}

Model:

Ext.define('Pet', {
    extend: 'Ext.data.Model',
    requires: [
        'Ext.data.field.Field'
    ],
    fields: ["name"],
    hasOne: [{
        name: 'type',
        model: "PetType",
        associationKey: 'type'
    }]
});
Ext.define('PetType', {
    extend: 'Ext.data.Model',
    requires: [
        'Ext.data.field.Field'
    ],
    fields: ["animal", "primaryFood"]
});

Store:

Ext.define('PetStore', {
    extend: 'Ext.data.Store',
    requires: [
        'Pet',
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json'
    ],
    constructor: function (cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'PetStore',
            autoLoad: true,
            model: 'Pet',
            proxy: {
                type: 'ajax',
                url: 'data/Pets.json',
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                }
            }
        }, cfg)]);
    }
});

Grid Panel:

Ext.define('PetView', {
    extend: 'Ext.panel.Panel',


    items: [{
        xtype: 'grid',
        title: 'Pets',


        store: "PetStore",


        columns: [{
            text: 'Pet Name',
            dataIndex: 'name',
            xtype: 'gridcolumn'
        },
        {
            text: 'Pet Type',
            dataIndex: 'type.animal',
            xtype: 'gridcolumn'
        },
        {
            text: 'Primary Food',
            dataIndex: 'type.primaryFood',
            xtype: 'gridcolumn'
        }],
        plugins: [
            {ptype: 'rowediting', pluginId: 'rowediting'}
        ]
    }]
});

I expect the result to be:

Pet Name | Pet Type | Primary Food
tom    | cat | milk
jerry | mouse | cheese

Data index is not working in the grid panel:

dataIndex: 'type.animal'

Any help is appreciated!

I want my model to have the one to one relationship.
I do not want my Pet model to have the PetType's attributes.
Ie., I don't want {name: "type.animal", mapping: "type.animal"} in Pet Model.

[yeghikyan]

You can use renderer:

{
    text: 'Pet Type',
    dataIndex: 'type.animal',
    renderer: function(value, metaData) {
        return metaData.record.getAssociatedData().type.animal;
    }
}, {
    text: 'Primary Food',
    dataIndex: 'type.primaryFood',
    renderer: function(value, metaData) {
        return metaData.record.getAssociatedData().type.primaryFood;
    }
}

[senthurpandian]

Thanks for your quick reply. I tried this option, if I do this, the Grid Row Edit feature is not working properly.

Is dot notation not built-in by default? I think this is a basic feature.

Please let me know if you know a good option for row edit.

[yeghikyan]

If you will look the class Ext.view.Table, there are the following lines

fieldValue = record.data[column.dataIndex]

record.data is just associative array.
and then it calls appropriate column renderer:

value = column.renderer.call(column.usingDefaultRenderer ? column : column.scope || me.ownerCt, fieldValue, cellValues, record, recordIndex, fullIndex, me.dataSource, me);

so this functionality is not supported.

Regarding editor, I think you can use change event and set appropriate child record value there.

[senthurpandian]

thats sad to know

would love to have this as a stock option

[Snaker]

I don't know if anyone need it anymore but I had the same problem in Ext-6.6 and I build the follwing solution.

Ext.define('Override.grid.column.Column', {
    override: 'Ext.grid.column.Column',


    initComponent: function() {
        var me = this;


        me.callParent();


        if (me.isNestedDataIndex()) {
            me.renderer = me.rendererNested;
        }
    },


    isNestedDataIndex: function() {
        var me = this,
            ArrKey = me.dataIndex.split('.');;


        if (ArrKey.length > 1) {
            return true;
        } else {
            return false;
        }
    },


    rendererNested: function (value, metaData, record, rowIndex, colIndex) {
        if (
            Ext.isDefined(value) &&
            !Ext.isArray(value) &&
            !Ext.isObject(value) &&
            value.length > 0
        ) {
            return value;
        } else {
            var me = this,
                dataIndex = me.getColumns()[colIndex].dataIndex,
                ArrKey = dataIndex.split('.');


            value = record.data;


            Ext.each(ArrKey, function (splitKey) {
                if (
                    Ext.isObject(value) &&
                    Ext.isDefined(value[splitKey])
                ) {
                    value = value[splitKey];
                } else {
                    value = null;
                }
            });


            return value;
        }
    }
});

This works for me.

Have fun with it