PDA

View Full Version : Refresh Panel



vipinmohit_sencha
6 Jun 2012, 8:12 AM
I have a panel...which consist of 5 comboboxes.
and I need to delete them and insert new 10 comboboxes in that Panel..for some event.
I am able to delete the older components
but new which I added are not shown.
somehow it is not rendered in Panel.
I tried doLayout() as well but not working
pls help.

scottmartin
6 Jun 2012, 9:03 AM
See if this works:




var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});

var form = Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'combobox',
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
}]
});

setTimeout(function(){

var field = form.down('combobox');
field.destroy();

form.add(
Ext.create('Ext.form.ComboBox', { fieldLabel: 'Combo 1' }),
Ext.create('Ext.form.ComboBox', { fieldLabel: 'Combo 2' })
);

}, 3000);


Scott.

vipinmohit_sencha
6 Jun 2012, 9:19 AM
Thanks Scott,
but I have already tried destroy...which is deleting the component from panel
but I am adding new components which are not visible in panel
not sure...how to render the panel for dynamically added combo boxes

scottmartin
6 Jun 2012, 9:36 AM
Does my example not work as you described?
It should delete the current combo and add 2 new combos to form.

Perhaps you can provide a small working example.

Scott.