PDA

View Full Version : Adding and Removing Containers dynamically into a Ext.form.Panel



nawin.muttineni@gmail.com
3 Jul 2013, 1:13 AM
Hi,
I have a problem while adding and removing containers to a panel.
I have a store, based on the data in the store i need to create some text boxes.
Every time after loading store i have to remove previous text boxes and create new text boxes.
It is fine without removing the text boxes, but when i remove the previous previous one i'm unable to create new text boxes.

Can any one please help me?


Ext.define('tz.ui.MyPanel', {
extend: 'Ext.form.Panel',
autoScroll:true,

initComponent: function() {
var me = this;
me.items = [ ];
me.callParent(arguments);
},

onLoadComments : function() {

var removeItems = this.items.items.slice();
for(i=0; i<= removeItems.length ;i++){
this.remove(removeItems[i],true);
}

this.doLayout();

for (i = 0; i < dataStore.data.items.length; ++i) {
var container = new Ext.container.Container({
layout: 'hbox',
id : 'container'+i,
renderTo: document.body,
items: [
{
xtype: 'textarea',
name : 'comments'+i,
id : 'comments'+i,
},{
xtype:'datefield',
name: 'created'+i,
labelAlign :'right',
id : 'created'+i,
},{
xtype:'displayfield',
name: 'createdBy'+i,
// id : 'createdBy'+i,
}]
});
this.items.add(container);
this.doLayout();
}
}
});

slemmon
4 Jul 2013, 1:55 PM
I would use formPanel's removeAll() method and then when adding items collect up all containers to be added into an array and pass the lot in all at once:



var store = Ext.create('Ext.data.Store', {
fields: ['foo']
});


Ext.define('tz.ui.MyPanel', {
extend: 'Ext.form.Panel',
autoScroll: true,


onLoadComments: function () {
var i = 0,
items = [],
ct;


this.removeAll();


store.each(function (item) {
ct = new Ext.container.Container({
layout: 'hbox',
id: 'container' + i,
items: [{
xtype: 'textarea',
name: 'comments' + i,
id: 'comments' + i,
}, {
xtype: 'datefield',
name: 'created' + i,
labelAlign: 'right',
id: 'created' + i,
}, {
xtype: 'displayfield',
name: 'createdBy' + i,
}]
});
i++;
items.push(ct);
});
this.add(items);
}
});


var form = Ext.create('tz.ui.MyPanel', {
renderTo: document.body,
minHeight: 100,
width: 300,
tbar: [{
text: 'Load from Store',
handler: function () {
store.on({
datachanged: form.onLoadComments,
single: true,
scope: form
});


store.loadRawData([{
foo: 'bar'
}, {
foo: 'bar'
}]);
}
}]
});

nawin.muttineni@gmail.com
5 Jul 2013, 1:04 AM
This is the one exactly what i want.
Thanks slemmon