Display nested data in a grid inside a window with extjs 4

Question

I have a model, a store and a grid (which will be populated with the data in the store). On clicking on a row in the grid, it opens up a window which has a testbox, a panel which intern holds another grid. My data is nested and I'm finding it difficult to pass the values to the grid. Below is my model, store and the components.

Ext.onReady(function() {

    //Model
    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'firstname', type: 'string' },
            { name: 'lastname', type: 'string' },
            { name: 'senority', type: 'int' },
            { name: 'dep', type: 'auto' },
            { name: 'dep_id', type: 'int', mapping: 'dep.dep_id'},
            { name: 'dep_Name', type: 'string', mapping: 'dep.dep_Name'},
            { name: 'hired', type: 'string' }
        ]
    });

    //Store
    Ext.create('Ext.data.Store', {
        model: 'User',
        storeId:'employeeStore',
//      fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
        data:[
            {firstname:"Michael",
                lastname:"Scott", 
                senority:7, 
                dep:[{
                    dep_id: 1000,
                    dep_Name: 'HR'
                }], 
                hired:"01/10/2004"},
            {firstname:"Dwight", 
            lastname:"Schrute", 
            senority:2, 
            dep:[{
                dep_id: 1001,
                dep_Name: 'Sales'
                }], 
            hired:"04/01/2004"}
        ]
    });

    //First grid Panel
    Ext.create('Ext.grid.Panel', {
        title: 'Employee Data',
        id: 'gridID',
        store: Ext.data.StoreManager.lookup('employeeStore'),
        columns: [
            { text: 'First Name',  dataIndex: 'firstname' },

            {
                header: 'Button',
                xtype: 'actioncolumn',
                icon : 'test.png',
                handler: function(grid, rowIndex, colIndex, item, e , record) {
                    rIx=rowIndex;
                    Ext.create('MyWindow',{rIx: rowIndex}).show();
                }

            }

        ],

        width: 500,
        renderTo: Ext.getBody()
    });

    // Window
    Ext.define('MyWindow', {
        extend: 'Ext.window.Window',
        store : Ext.data.StoreManager.lookup('employeeStore'),
        height: 300,
        width: 400,
        title: 'My Window',
        items: [        //testfield
                     {
                        xtype: 'textfield',           
                        id : 'fname',
                        fieldLabel:'Name'
                     },
                     //panel
                     {
                         xtype: 'panel',
                         id: 'wPanel',
                         title: 'Test',
                         height: 400,

                         listeners: {
                             afterrender: function(){//alert("-->");
                                        //grid inside the panel which is in window
                                         var wgrid = Ext.create('Ext.grid.Panel', {
                                        title: 'Employee Data',
                                        id: 'gridID1',
                                        store: Ext.data.StoreManager.lookup('employeeStore'),
                                        columns: [
                                            { text: 'Department ID', 
                                              dataIndex: 'dep_id' 
                                            },
                                            {
                                                text: 'Department Name',
                                                dataIndex: 'dep_Name'

                                            }

                                        ],

                                        width: 300,
                                        height: 250

                                    });
                                  Ext.getCmp('wPanel').add(wgrid);



                                }
                         }
                     }

                 ],
        listeners: {
                afterrender: function(win){
                //alert("idx= " + win.rIx);
                var r = Ext.data.StoreManager.lookup('employeeStore').getAt(win.rIx);
                var firstname = r.get('firstname');
                Ext.getCmp('fname').setValue(firstname);   
                }
        }
        });

});

Im trying it with mapping and Im not able to see any data in the grid inside the panel. On clicking on the first row, the text box inside the window should display firstname( which is working fine), and the grid inside the window should display department id and department name of that particular employee alone. First, i tried with hasMany and belongsTo, but of no luck. Now I'm trying with mapping. Pls help....

Do I have to use the proxy and reader options to achieve this...If so, could anyone pls let me know how to do it... — CARTIC

Johan Haest Johan Haest · Accepted Answer · 2013-03-15T11:31:26

You indeed use hasMany in your mapping.

I've made a fiddle for you with your example, I changed a few stuff arround, it's working now. http://jsfiddle.net/johanhaest/UehS2/

Ext.onReady(function () {

    //Model
    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'firstname',
            type: 'string'
        }, {
            name: 'lastname',
            type: 'string'
        }, {
            name: 'senority',
            type: 'int'
        }, {
            name: 'dep'
        }, {
            name: 'hired',
            type: 'string'
        }]
    });

    Ext.define('Department', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'dep_id',
            type: 'int'
        }, {
            name: 'dep_Name',
            type: 'string'
        }]
    });

    //Store
    Ext.create('Ext.data.Store', {
        model: 'User',
        storeId: 'employeeStore',
        //      fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
        data: [{
            firstname: "Michael",
            lastname: "Scott",
            senority: 7,
            dep: [{
                dep_id: 1000,
                dep_Name: 'HR'
            }],
            hired: "01/10/2004"
        }, {
            firstname: "Dwight",
            lastname: "Schrute",
            senority: 2,
            dep: [{
                dep_id: 1001,
                dep_Name: 'Sales'
            }],
            hired: "04/01/2004"
        }]
    });

    //First grid Panel
    Ext.create('Ext.grid.Panel', {
        title: 'Employee Data',
        id: 'gridID',
        store: Ext.data.StoreManager.lookup('employeeStore'),
        columns: [{
            text: 'First Name',
            dataIndex: 'firstname'
        },

        {
            header: 'Button',
            xtype: 'actioncolumn',
            icon: 'test.png',
            handler: function (grid, rowIndex, colIndex, item, e, record) {
                rIx = rowIndex;
                Ext.create('MyWindow', {
                    rIx: rowIndex
                }).show();
            }

        }

        ],

        width: 500,
        renderTo: Ext.getBody()
    });

    // Window
    Ext.define('MyWindow', {
        extend: 'Ext.window.Window',
        store: Ext.data.StoreManager.lookup('employeeStore'),
        height: 300,
        width: 400,
        title: 'My Window',
        items: [ //testfield
        {
            xtype: 'textfield',
            id: 'fname',
            fieldLabel: 'Name'
        },
        //panel
        {
            xtype: 'panel',
            id: 'wPanel',
            title: 'Test',
            height: 400,

            listeners: {
                afterrender: function (panel) { //alert("-->");
                    //grid inside the panel which is in window
                    var emplStore = Ext.data.StoreManager.lookup('employeeStore');
                    var win = panel.up('window');
                    var depStore = Ext.create('Ext.data.Store', {
                        model: 'Department',
                        data: emplStore.getAt(win.rIx).get('dep')
                    });
                    var wgrid = Ext.create('Ext.grid.Panel', {
                        title: 'Employee Data',
                        id: 'gridID1',
                        store: depStore,
                        columns: [{
                            text: 'Department ID',
                            dataIndex: 'dep_id'
                        }, {
                            text: 'Department Name',
                            dataIndex: 'dep_Name'

                        }],

                        width: 300,
                        height: 250

                    });
                    Ext.getCmp('wPanel').add(wgrid);
                }
            }
        }

        ],
        listeners: {
            afterrender: function (win) {
                //alert("idx= " + win.rIx);
                var r = Ext.data.StoreManager.lookup('employeeStore').getAt(win.rIx);
                var firstname = r.get('firstname');
                Ext.getCmp('fname').setValue(firstname);
            }
        }
    });

});

Note that your code can be optimised a lot, but I focused on your current prob.

Display nested data in a grid inside a window with extjs 4

1 Answers