At first I struggled to get my ExtJS ComboBoxes to act like a straight HTML Select. In my application, I have a grid which loads the data into a store via AJAX. Later, create or edit dialogs display which contain a combobox of items represented by the store. Rather than load these again from the server, I wanted to reuse the data from the store. The problem I had is selecting a value in the dialog would filter the grid using the same filter. It appeared that ExtJS was applying the filter on the store rather than the view components. My original solution involved creating an array of items after the store had been loaded and passing this array to a combobox constructor. After further research, I was mistaken and the following needs to be done to make the ExtJS Combobox components would as a separate filter like an HTML Select:
- Provide a
hiddenId
option to the ComboBox constructor.
- Set the
triggerAction
to 'all'
. Doing so essentially clears the filter and will treat the combobox like it is querying from the store separately.
- Ensure the
mode
is set to 'local'
.
Here is an example of a configuration:
org.javad.CatalogueHelper = {
getCatalogueSelection : function(id, options) {
options = options || {}; // initialize if undefined
var catalogues = new Ext.form.ComboBox(Ext.applyIf(options, {
id: id, // Passed in id to create composite fields.
fieldLabel: 'Catalogue',
allowBlank : false,
hiddenName: id + '-selected',
name : id,
mode:'local',
editable: false,
valueField: 'id', // from store, what to store in FORM
displayField: 'displayString', // Value to display in Select
store: org.javad.CatalogueStore,
hiddenId: id + '-value',
width: 200,
triggerAction: 'all', // key to clear filter
selectOnFocus: true
}));
return catalogues;
}
};
1 comment:
Thanks for that. Just one of those options got my drop-down working as required!
Post a Comment