How to display a panel based on combobox selection in ExtJS - extjs

Question

Here is my code:
{
xtype: 'combo',
width: 150,
value: 'select last..',
store: new Ext.data.SimpleStore({
data: [
[0, 'first'],
[1, 'second'],
[2, 'third']
],
id: 0,
fields: ['value', 'text']
}),
valueField: 'value',
displayField: 'text',
triggerAction: 'all',
editable: false,
name: 'lastComboSelection',
itemId: 'lastCombo',
listeners: {
change: function (combo, newValue, oldValue) {
//based on selection want to display a panel
}
}
},{
xtype: 'firstPanel',
name: 'first text field'
},{
xtype: 'SecondPanel',
name: 'second text field '
},{
xtype: 'thirdPanel',
name: 'last text field '
}

Answer 1

Here is the Change method to select a panel via combo
And here is the simple fiddle example fiddle
Regards:
Salman Hassan :)
listeners: {
change: function(combo, newVal, oldVal, eOpts) {
if (newVal == 'Select Panel 1') {
var panel1 = Ext.ComponentQuery.query("#panel1")[0].show();
var panel2 = Ext.ComponentQuery.query("#panel2")[0].hide();
var panel3 = Ext.ComponentQuery.query("#panel3")[0].hide();
} else if (newVal == 'Select Panel 2') {
var panel1 = Ext.ComponentQuery.query("#panel1")[0].hide();
var panel2 = Ext.ComponentQuery.query("#panel2")[0].show();
var panel3 = Ext.ComponentQuery.query("#panel3")[0].hide();
} else if (newVal == 'Select Panel 3') {
var panel1 = Ext.ComponentQuery.query("#panel1")[0].hide();
var panel2 = Ext.ComponentQuery.query("#panel2")[0].hide();
var panel3 = Ext.ComponentQuery.query("#panel3")[0].show();
}
}
}

Answer 2

If you are using Ext JS version 5.0 or above, then bind the selection property of combobox to activeItem property of a container with panels as its child items. The layout for this container would be card. For example:
Ext.define('OnlyOnePanel', {
extend: 'Ext.panel.Panel',
viewModel: {},
layout: 'vbox',
items: [{
xtype: 'combobox',
width: 150,
emptyText: 'Select..',
store: new Ext.data.SimpleStore({
data: [
[0, 'first'],
[1, 'second'],
[2, 'third']
],
fields: ['value', 'text']
}),
valueField: 'value',
displayField: 'text',
value: 'first',
triggerAction: 'all',
editable: false,
name: 'lastComboSelection',
itemId: 'lastCombo',
bind: {
selection: '{selectedItem}'
}
}, {
xtype: 'container',
layout: 'card',
bind: {
activeItem: '{selectedItem.value}'
},
items: [{
xtype: 'panel',
html: 'First Panel'
}, {
xtype: 'panel',
html: 'Second Panel'
}, {
xtype: 'panel',
html: 'Third Panel'
}]
}]
});
Check this fiddle.