Setting data from a store to a form panel which has a grid in extjs 4.2

Question

I'm trying to set values for the components in a form panel and below is my code.

Form Panel with grid:

Ext.define('MyApp.view.MyForm', {
    extend: 'Ext.form.Panel',

    height: 436,
    width: 754,
    layout: {
        columns: 4,
        type: 'table'
    },
    bodyPadding: 10,
    title: 'My Form',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'displayfield',
                    colspan: 4,
                    fieldLabel: '',
                    value: 'Display Field'
                },
                {
                    xtype: 'displayfield',
                    colspan: 2,
                    margin: '0 50 0 0 ',
                    fieldLabel: 'Age',
                    labelAlign: 'top',
                    value: 'Display Field'
                },
                {
                    xtype: 'displayfield',
                    colspan: 2,
                    fieldLabel: 'Country',
                    labelAlign: 'top',
                    value: 'Display Field'
                },
                {
                    xtype: 'gridpanel',
                    colspan: 4,
                    header: false,
                    title: 'My Grid Panel',
                    store: 'MyJsonStore',
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'DeptName',
                            text: 'Dept Name'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'DeptId',
                            text: 'Dept ID'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

Models:

Ext.define('MyApp.model.EmpModel', {
    extend: 'Ext.data.Model',

    uses: [
        'MyApp.model.DeptModel'
    ],

    fields: [
        {
            name: 'Name'
        },
        {
            name: 'Age'
        },
        {
            name: 'Country'
        },
        {
            name: 'Dept'
        }
    ],

    hasMany: {
        associationKey: 'Dept',
        model: 'MyApp.model.DeptModel'
    }
});

Ext.define('MyApp.model.DeptModel', {
    extend: 'Ext.data.Model',

    uses: [
        'MyApp.model.EmpModel'
    ],

    fields: [
        {
            name: 'DeptName'
        },
        {
            name: 'DeptId'
        }
    ],

    belongsTo: {
        associationKey: 'Dept',
        model: 'MyApp.model.EmpModel'
    }
});

Store:

Ext.define('MyApp.store.MyJsonStore', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.EmpModel'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            model: 'MyApp.model.EmpModel',
            storeId: 'MyJsonStore',
            data: {
                EmpDet: [
                    {
                        EmpName: 'Kart',
                        Age: '29',
                        Dept: [
                            {
                                DeptName: 'Dev',
                                DeptId: '1000'
                            }
                        ]
                    }
                ]
            },
            proxy: {
                type: 'ajax',
                url: 'data/empDet.json',
                reader: {
                    type: 'json'
                }
            }
        }, cfg)]);
    }
});

Json data:

{
    "EmpDet": [
        {
            "EmpName": "Kart",
            "Age": "29",
            "Dept": [
                {
                    "DeptName": "Dev",
                    "DeptId": "1000"
                }
            ]
        }
    ]
}

Questions:

1) I had left the value of the component as "Display Field" itself because if I remove this value the width of the grid below decreases. I feel this is because of the table layout and colspans. Is there any other best way to display labels without any alignment change on value load.

2) I'm trying to set the value for the display field. I tried to do it with the afterrender event but the problem is that it throws a undefined error at Ext.getStore('MyJsonStore').getAt(0). I found that this works fine if I write the same in the click event of a button. So, I feel that the store is not loaded when I try the afterrender event of the displayfield (autoload for store is set to true). Is there an alternative for afterrender event of a component. Also, Is there a way to set all the field values at a stretch instead of setting every component one by one?

3) Also I find it difficult to do the association properly. I'm using Sencha Architect 2.2 and when I go the data index of the grid, I'm not able to get the "DeptName" and "DeptId" in the dropdown.

Please help.

Answer 1

For the question number 2, I want to suggest the below way. I hope it works for you.

My solution:

You can set the display fields values when the store is loaded. So you can use load event of store as below:

yourStoe.on('load',function()
{
   //set display field values here
});