PDA

View Full Version : Controlling the Rendering based on Combo Box selection



V Srinivasan
13 Oct 2010, 9:45 PM
* In the code below things are displayed based on combo box selection


* i want to Control the Rendering based on Combo Box selection. i.e If i have a combo box in the west


region & based on the combo selection things have to be displayed in the center region



* I tried changing Itemid & form variable.but it didnt work


* can anyone please give a similar example for above case?


* Please help i am a newbie to Ext JS


Ext.onReady(function(){var store = new Ext.data.JsonStore({
fields: ['name', 'fields'],
data: [
{name: 'Text', fields: [
{xtype: 'radiogroup', items: [
{fieldLabel : "Type",boxLabel: 'Exact', name: 'rb-auto', inputValue: 1},
{boxLabel: 'InExact', name: 'rb-auto', inputValue: 2, checked: true}


]}
]},
{name: 'List', fields: [
{xtype: 'radiogroup', vertical: true,
items: [


{boxLabel: 'OENUM', name: 'rb-custwidth', inputValue: 2, checked: true},
{boxLabel: 'UENUM', name: 'rb-custwidth', inputValue: 3},
{boxLabel: 'List of UENUM', name: 'rb-custwidth', inputValue: 4},
{boxLabel: 'Boolean', name: 'rb-custwidth', inputValue: 4}
], fieldLabel: 'Select'}
]},
{name: 'LongText', fields: [
{xtype: 'htmleditor', fieldLabel:'Default Value'}
]},
{name: 'Link / Attachment', fields: [
{xtype: 'textarea', fieldLabel: 'Please Enter the Link'}
]}
]
});


new

Ext.Viewport({

layout: 'fit',
items: [{
xtype: 'form',
items: [{
xtype: 'combo',
fieldLabel: 'Selection',
store: store,
mode: 'local',
displayField: 'name',
triggerAction: 'all',
editable: false,
listeners: {
select: function(combo, record) {
var form = combo.ownerCt;
var panel = form.getComponent('container');
if (panel) {
form.remove(panel);
}
form.add({
xtype: 'panel',
itemId: 'container',
layout: 'form',
items: record.get('fields')
});
form.doLayout();
}
}
}]
}]
});});