add items to panel and columns to grid dynamically

Question

I am using ExtJs 4.1 and trying to add items to panel and columns to grid dynamically.

My Requirement

MainPanel (Ext.panel.Panel) has 2 child items:

• DynamicPanel (Ext.panel.Panel)

  1. I want to add this panel to the main panel dynamically.
  2. Then... I want to add items to DynamicPanel dynamically, the items are a config of the MainPanel called : "elements"

• DynamicGrid (Ext.grid.Panel)

  1. I want to again, add this to the main panel dynamically.
  2. I want to add columns to DynamicGrid dynamically, and again these columns are part of the MainPanel config gridcolumns.

I am getting the below error:

this.dpanel is undefined
[Break On This Error] this.dpanel.add(this.elements)

My code is as below:

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone', 'date', 'time'],
    data: {
        'items': [{
            "name": "Lisa",
                "email": "[EMAIL="
            [email protected] "][email protected][/EMAIL]",
                "phone": "555-111-1224",
                "date": "12/21/2012",
                "time": "12:22:33"
        }, {
            "name": "Bart",
                "email": "[EMAIL="
            [email protected] "][email protected][/EMAIL]",
                "phone": "555-222-1234",
                "date": "12/21/2012",
                "time": "12:22:33"
        }, {
            "name": "Homer",
                "email": "[EMAIL="
            [email protected] "][email protected][/EMAIL]",
                "phone": "555-222-1244",
                "date": "12/21/2012",
                "time": "12:22:33"
        }, {
            "name": "Marge",
                "email": "[EMAIL="
            [email protected] "][email protected][/EMAIL]",
                "phone": "555-222-1254",
                "date": "12/21/2012",
                "time": "12:22:33"
        }]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});
Ext.define('DynamicGridPanel', {
    extends: 'Ext.grid.Panel',
    alias: 'widget.dynamicGridPanel',
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    selType: 'rowmodel',
    plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    })],
    height: 200,
    width: 200
});

Ext.define('DynamicPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.dynamicPanel',
    title: 'DynamicAdd',
    width: 200,
    height: 200
});
Ext.define('MainPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.dynamicMainPanel',
    title: 'MainPanel',
    renderTo: Ext.getBody(),
    width: 600,
    height: 600,
    constructor: function (config) {
        var me = this;
        me.callParent(arguments);
        me.dpanel = Ext.create('DynamicPanel');
        me.dgridpanel = Ext.create('DynamicGridPanel');
        me.items = [this.dpanel, this.dgridpanel];
    }, //eo constructor
    onRender: function () {
        var me = this;
        me.callParent(arguments);
        //I am getting  error at the below lines saying the dpanel and dynamicGridPanel  undefined
        me.dpanel.add(this.elements);
        me.dynamicGridPanel.columns.add(this.gridcolumns);
    }
});
var panel1 = Ext.create('MainPanel', {
    gridcolumns: [{
        xtype: 'actioncolumn',
        width: 42,
        dataIndex: 'notes',
        processEvent: function () {
            return false;
        }
    }, {
        xtype: 'gridcolumn',
        header: 'Name',
        dataIndex: 'name',
        editor: 'textfield'
    }, {
        xtype: 'gridcolumn',
        header: 'Email',
        dataIndex: 'email',
        flex: 1,
        editor: {
            xtype: 'textfield',
            allowBlank: false
        }
    }, {
        header: 'Phone',
        dataIndex: 'phone'
    }, {
        xtype: 'gridcolumn',
        header: 'Date',
        dataIndex: 'date',
        flex: 1,
        editor: {
            xtype: 'datetextfield',
            allowBlank: false
        }
    }, {
        xtype: 'gridcolumn',
        header: 'Time',
        dataIndex: 'time',
        flex: 1,
        editor: {
            xtype: 'timetextfield',
            allowBlank: false
        }
    }],
    elements: [{
        xtype: 'numberfield',
        width: 70,
        tabIndex: 1,
        fieldLabel: 'Account No',
        itemId: 'acctno',
        labelAlign: 'top'
    }, {
        xtype: 'textfield',
        itemId: 'lastname',
        width: 90,
        tabIndex: 2,
        fieldLabel: 'Last Name',
        labelAlign: 'top'
    }, {
        xtype: 'textfield',
        itemId: 'firstname',
        width: 100,
        tabIndex: 3,
        fieldLabel: 'First Name',
        labelAlign: 'top'
    }]
});

Solution

Create the child elements in initComponent:

initComponent: function() {
   var me = this;
   me.dpanel = Ext.create('DynamicPanel');
   me.dgridpanel = Ext.create('DynamicGridPanel');
   me.items = [this.dpanel, this.dgridpanel]; 
   me.callParent(arguments);
} 

Dont forget to define the require config for columns in your grid:

columns: []

Look at that Example here for adding dynamically columns in grid http://neiliscoding.blogspot.de/2011/09/extjs4-dynamically-add-columns.html