In the code presented below, I define the layout of a web page. I have a panel and a fieldset within that panel - in this fieldset i have a select field -> when something gets selected in that select field I would like to add a few more fieldsets below the existing one, and make them invisible, showing only one of them.
So the addition should be made dynamically, on the Change event of the selectfield. Can you give me some directions on this ?
Thank you!
Code:
var layout = {
....
this.panel = new Ext.form.FormPanel({
fullscreen: true,
scroll: 'vertical',
defaults: {
layout: {
pack: 'center'
}
},
hidden: true,
items: [
{
xtype: 'fieldset',
title: 'Filters',
defaults: {
labelWidth: '35%'
},
items: [
{
xtype: 'selectfield',
id: 'category_id',
label: 'Category',
valueField: 'code',
displayField: 'catname',
store: cStore,
listeners: {
change: function (field, value) {
//here i want to add the extra fieldsets
});
}
}
]
}
//this is where i want the new filedsets to be added
//{
// xtype: 'fieldset',
// title: 'Dynamic Fieldset',
// ...
//}
]
});
}