In Extjs “select “ event of ComboBox fires when a list item is selected.
Syntax : function(
Ext.form.ComboBox combo
,
Ext.data.Record rec
,
Number index )
combo : The ComboBox for which the select event is fired.
Rec : The data record returned from the ComboBox data store.
Index : The index of the selected item.
Example :
Lets create an example where selecting “india” in a Country ComboBox will display another ComboBox containing States of India otherwise it will display a Textbox.
First we need to create a panel that will contain the form fields , inside the Ext.onReady() method .
//******** Create a variable to hold our Form fields Panel.********//
var cntry_panel = new Ext.Panel({
header: false,
id: 'org-main',
layout: 'form',
labelWidth: 200,
border: false,
bodyStyle: 'padding:15px',
title: 'Select Country And State',
labelAlign: "right",
renderTo: Ext.getBody(),
items: [{
xtype: 'combo',
fieldLabel: 'Country',
id: 'country',
store: countryDataStore, //Array data store that will contain the country names.
displayField: 'country',
mode: 'local',
width: 260,
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a country...',
selectOnFocus: true,
listeners: {
/ /Calling the function that will handle select event.
select: State_Select
}
}, {
xtype: 'combo',
fieldLabel: 'State',
store: stateDataStore, //Array data store that will contain the States of India.
displayField: 'state',
valueField: 'state',
id: 'cmbState',
mode: 'local',
width: 150,
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a state...',
selectOnFocus: true
},{
xtype: 'textfield',
fieldLabel: 'State',
maxLength: 200,
name: 'txtState',
id: 'txtState',
width: 134
}]
});
In the above panel “State_Select” function is being called in the select event of Country ComboBox.
Lets define the function State_Select .
//******** Create a function to generate ComboBox for States on Country(India) select.********//
function State_Select(combo, record, index)
{
//***** Retriving the value of the selected country *****//
var value = combo.getValue();
//***** Retriving the State combo and State Textbox *******//
var cmbStates = Ext.getCmp('cmbState') ;
var cmbTxtStates = Ext.getCmp('txtState') ;
if(value == "India")
{
//** Set the visibility of the State Combo box to true **//
setStateComboVisibility(cmbStates, true);
//** Set the visibility of the Textbox to false **//
setStateComboVisibility(cmbTxtStates, false);
}
else
{
//** Set the visibility of the State Combo box to false **//
setStateComboVisibility(cmbStates, false);
//** Set the visibility of the Textbox to true **//
setStateComboVisibility(cmbTxtStates, true);
}
}
Now lets define the function “setStateComboVisibility” which will set the visibility of the form fileds.
//******** Create a function to set the visibility of the ComboBox.********//
function setStateComboVisibility(combo, visible)
{
if(visible)
{
combo.show();
combo.getEl().up('.x-form-item').setDisplayed(true); // display the label text
}
else
{
combo.hide();
combo.getEl().up('.x-form-item').setDisplayed(false); // hide the label text
}
}
Then finally put the cntry_panel inside a FormPanel.
//******** Create a variable to hold the Form Panel.********//
var cntry_form_panel = new Ext.form.FormPanel({
id: 'test-panel',
header: false,
layout: 'form',
autoScroll: true,
border: false,
autoHeight: true,
layout: 'form',
renderTo: Ext.getBody(),
items: [{
title: 'Select Country And State',
items: [cntry_panel] // Keeping the cntry_panel
}]
});
Now selecting “India” in the Country ComboBox will display the State ComboBox otherwise it will display the Textbox.