add items to panel and columns to grid dynamically - extjs

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)
I want to add this panel to the main panel dynamically.
Then... I want to add items to DynamicPanel dynamically, the items are a config of the MainPanel called : "elements"
DynamicGrid (Ext.grid.Panel)
I want to again, add this to the main panel dynamically.
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="
lisa#simpsons.com "]lisa#simpsons.com[/EMAIL]",
"phone": "555-111-1224",
"date": "12/21/2012",
"time": "12:22:33"
}, {
"name": "Bart",
"email": "[EMAIL="
bart#simpsons.com "]bart#simpsons.com[/EMAIL]",
"phone": "555-222-1234",
"date": "12/21/2012",
"time": "12:22:33"
}, {
"name": "Homer",
"email": "[EMAIL="
home#simpsons.com "]home#simpsons.com[/EMAIL]",
"phone": "555-222-1244",
"date": "12/21/2012",
"time": "12:22:33"
}, {
"name": "Marge",
"email": "[EMAIL="
marge#simpsons.com "]marge#simpsons.com[/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'
}]
});

Answer 1

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