PDA

View Full Version : Add items to panel and columns to grid dynamically



nil5286
15 Dec 2012, 11:18 AM
Hi,

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

My Requirement
MainPanel
|____
DynamicPanel (1.i want to add DynamicPanel

2.i want to add items to DynamicPanel dynamically, the items exists as part of MainPanel config "elements")
|____
DynamicGrid (1.i want to add DynamicGrid

2.i want to add columns to DynamicGrid dynamically, the columns exists as part of 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": "lisa@simpsons.com", "phone": "555-111-1224", "date": "12/21/2012", "time": "12:22:33" },
{ "name": "Bart", "email": "bart@simpsons.com", "phone": "555-222-1234", "date": "12/21/2012", "time": "12:22:33" },
{ "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244", "date": "12/21/2012", "time": "12:22:33" },
{ "name": "Marge", "email": "marge@simpsons.com", "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'
}

]
});

mitchellsimoens
17 Dec 2012, 7:50 AM
Create the components in the constructor before the callParent to see if that helps.