Monday, September 29, 2008

ExtJS ComboBox - Act like HTML Select

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:

  1. Provide a hiddenId option to the ComboBox constructor.
  2. Set the triggerAction to 'all'. Doing so essentially clears the filter and will treat the combobox like it is querying from the store separately.
  3. 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:

Dan said...

Thanks for that. Just one of those options got my drop-down working as required!