Results 1 to 6 of 6

Thread: How to display Nested model in Grid Panel

  1. #1

    Default Answered: How to display Nested model in Grid Panel

    Hi,

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

    Data:
    Code:
    {
        "data": [
            {
                "name": "tom",
                "type": {
                    "animal": "cat",
                    "primaryFood": "milk"
                }
            },
            {
                "name": "jerry",
                "type": {
                    "animal": "mouse",
                    "primaryFood": "cheese"
                }
            }
        ]
    }
    Model:
    Code:
    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:
    Code:
    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:
    Code:
    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:

    Code:
    Pet Name | Pet Type | Primary Food
    tom    | cat | milk
    jerry | mouse | cheese
    Data index is not working in the grid panel:
    HTML Code:
    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.

  2. If you will look the class Ext.view.Table, there are the following lines
    Code:
    fieldValue = record.data[column.dataIndex]
    record.data is just associative array.
    and then it calls appropriate column renderer:
    Code:
    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.

  3. #2
    Sencha User yeghikyan's Avatar
    Join Date
    Mar 2009
    Location
    München
    Posts
    574
    Answers
    99

    Default

    You can use renderer:

    Code:
    {
        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;
        }
    }
    "The competent programmer is fully aware of the strictly limited size of his own skull; therefore he approaches the programming task in full humility, and among other things he avoids clever tricks like the plague." – Edsger W. Dijkstra

  4. #3

    Default Not built into Grid?

    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.

  5. #4
    Sencha User yeghikyan's Avatar
    Join Date
    Mar 2009
    Location
    München
    Posts
    574
    Answers
    99

    Default

    If you will look the class Ext.view.Table, there are the following lines
    Code:
    fieldValue = record.data[column.dataIndex]
    record.data is just associative array.
    and then it calls appropriate column renderer:
    Code:
    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.
    "The competent programmer is fully aware of the strictly limited size of his own skull; therefore he approaches the programming task in full humility, and among other things he avoids clever tricks like the plague." – Edsger W. Dijkstra

  6. #5

    Default Expected

    thats sad to know

    would love to have this as a stock option

  7. #6
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Dsseldorf, Germany
    Posts
    40

    Lightbulb

    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.

    Code:
    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

Similar Threads

  1. Nested List View with TreeStore and Model, fail to display to the list.
    By xiao7cn in forum Sencha Architect 3.x: Q&A
    Replies: 0
    Last Post: 4 Jun 2014, 8:12 AM
  2. unable to display data from nested store/model
    By afidalgo in forum Ext: Q&A
    Replies: 3
    Last Post: 27 Mar 2014, 4:23 AM
  3. Replies: 3
    Last Post: 5 Jul 2013, 5:33 AM
  4. Replies: 1
    Last Post: 13 Dec 2011, 3:16 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •