Reputation: 4581
I have built a query builder using ExtJS's comboboxes in my application.
When a user selects a field from the combobox to search on, he has the option to add up to two more comboboxes to narrow his search.
The store of my comboboxes has six items - when the user selects one of those six items, that particular item should not be available to select if he adds on another combobox.
What I was thinking was placing the comboboxes store into a variable and somehow removing the first value, then loading it into the newly added combobox.
Any simple way this can be done?
Cheers!
EDIT
I have made this illustration to make the question simpler to understand
Upvotes: 0
Views: 435
Reputation: 30082
Ext.require('*');
Ext.define('KeyValue', {
extend: 'Ext.data.Model',
fields: ['id', 'value']
})
Ext.onReady(function() {
var options = [{
id: 1,
value: 'One'
}, {
id: 2,
value: 'Two'
}, {
id: 3,
value: 'Three'
}, {
id: 4,
value: 'Four'
}, {
id: 5,
value: 'Five'
}, {
id: 6,
value: 'Six'
}];
var parent = new Ext.form.field.ComboBox({
store: {
model: KeyValue,
data: options
},
forceSelection: true,
editable: false,
displayField: 'value',
valueField: 'id',
queryMode: 'local',
listeners: {
select: function(cmb, records) {
var selected = records[0],
store = child.getStore(),
rec;
rec = store.getById(selected.getId());
store.remove(rec);
}
}
});
var child = new Ext.form.field.ComboBox({
store: {
model: KeyValue,
data: options
},
forceSelection: true,
editable: false,
displayField: 'value',
valueField: 'id',
queryMode: 'local'
});
new Ext.form.Panel({
width: 400,
renderTo: document.body,
items: [parent, child]
});
});
Upvotes: 1