PDA

View Full Version : EXTJS cascading/dependent/linked combobox



Troxy
9 Jan 2014, 2:52 PM
Hello everyone! Thanks in advance for anyone willing to give me a hand.

I am trying to do something that I feel should be very simple. I want one combobox to determine which store loads in the next combobox.

Traditionally this would be used for something where you select a country, and then populate the next combobox with provinces or states within that country.

My system is looking for two different types of electronic devices. each device has the possibility of having a certain feature. I want to be able to select yes or no and have the device selection populate a store based on that selection.

To start I setup my feature selection


var featureOption = [['0','Yes'],['1','No']];

var feature_optionStore = new Ext.data.ArrayStore({
fields: ['value','option'],
data : featureOption
});

Then I setup the feature combobox.


var feature_ComboBox = new Ext.form.ComboBox({
fieldLabel: 'P2PE',
store: feature_optionStore,
valueField: 'value',
emptyText: 'Compliant?',
displayField: 'option',
editable: false,
width: 150,
allowblank: false,
mode: 'local',
triggerAction: 'all',
listeners: {
}
});

then I setup the store if the device DOES have the feature.


var yes_deviceStore = new Ext.data.Store({
autoLoad: false,
pruneModifiedRecords: true,
url: 'inc/template.php',
baseParams: {
list: 'device_inventory_yes'
},
reader: new Ext.data.JsonReader({
root: 'device_inventory',
id: 'deviceID',
fields: ['deviceID', 'device_information']
})

next comes the store if the device does NOT have the feature.


var no_deviceStore = new Ext.data.Store({
autoLoad: false,
pruneModifiedRecords: true,
url: 'inc/template.php',
baseParams: {
list: 'device_inventory_no'
},
reader: new Ext.data.JsonReader({
root: 'device_inventory',
id: 'deviceID',
fields: ['deviceID', 'device_information']
})
Then I finally setup the device combobox


var device_Combo = new Ext.form.ComboBox({
fieldLabel: '<span class="spacer">&nbsp;</span>Select Device',
valueField: 'deviceID',
displayField: 'device_information',
disabled: true,
editable: false,
width: 150,
allowblank: false,
model: 'remote',
triggerAction: 'all',
});


I have tried all different types of ways to make the listener function in the feature combobox populate the device combobox but cannot seem to make anything work. I don't understand many of the examples I have found, I don't know if I am storing my data improperly. I'm really clueless.

If you have any recommendations they would be greatly appreciated!


Thank You!

-Troxy

slemmon
13 Jan 2014, 2:58 PM
You'll be able to use the same store config for the second combobox regardless of whether it's loading the 'no' dataset or the 'yes' dataset.

You can leave the baseParams config off of the store config and instead set a 'select' event listener on your feature_Combo that loads the device_Combo's store with the appropriate param (you may end up wanting to eval the store / value of the device_Combo to see if you need to reset() it as well).



listeners: {
select: function (combo, record, index) {
device_Combo.getStore().load({
list: 'device_inventory_' + record.get('option').toLowerCase()
});
}
}