Filter remote comboxes storages locally in ExtJs

Question

I have an ExtJs combo box. His store is loaded using JSON (using the MyStore class below). I want to load all the values ​​into the repository and then filter them with the text entered in the combo field (preferably using the typeAhead function).

The problem is that I want to do filtering on the client side (the combo mode property is 'remote', by default). I don’t want my combo to update my store every time I print something. How can i do this?

Thanks.

Here is my store class:

MyStore = Ext.extend(Ext.data.JsonStore, { constructor: function(jsonUrl, storeId, id, description, isAutoLoad, cfg) { cfg = cfg || {}; GenericStore.superclass.constructor.call(this, Ext.apply({ storeId: storeId, root: 'result', url: jsonUrl, autoLoad: isAutoLoad, fields: [ { name: id }, { name: description } ] }, cfg)); } }); 

And combos:

  xtype: 'combo', fieldLabel: 'The Combo', width: 150, store: myStoreData, valueField: 'id', displayField: 'name', minChars : 0, editable : false, itemId : 'my-combo' 

Answer 1

To do this, you must:

• Create a MyStore class with the configuration option "isAutoLoad" as "true"
• In your combobox configuration, set the "mode" configuration parameter to "local" (see "Built-in combo configuration code below for another configuration").

Here is my short example:

Build the variable myStoreData p>

 var myStoreData = new MyStore({ autoLoad: true, //so the store will load automatically ...any_other_config_option... }); 

Created a combo configuration

 { xtype: 'combo', fieldLabel: 'The Combo', width: 150, store: myStoreData, // myStoreData is already loaded before as it have 'autoLoad' config set to true // and act as localstore to populate the combo box item // when the combo "mode" config set to 'local' valueField: 'id', displayField: 'name', minChars : 0, editable : true, //before was editable : false, itemId : 'my-combo', mode: 'local', // by default this was mode: 'remote' typeAhead: true // by default this was typeAhead: false } 

Answer 2

You want to use the store.filter () method. You can use this to use user-entered information to filter your store, which uses a combo box. This is taken from the ExtJS API documentation for data.store.

 store.filter([ { property : 'name', value : 'Ed', anyMatch : true, //optional, defaults to true caseSensitive: true //optional, defaults to true }, //filter functions can also be passed { fn : function(record) { return record.get('age') == 24 }, scope: this } ]); 

Answer 3

In my case, I had to add the lastQuery:'' configuration option to the combo.

explanation: http://progex.wordpress.com/2010/03/26/extjs-combo-dropdown-does-not-filter-on-first-trigger/

Answer 4

Add a listener to your store at the event "load", do filtering by deleting or marking the entries; when deleting, this is an explicit loading of the combo component, if you mark that you need to recognize these flags in combos and show or not ...

It’s not possible to go with more details if I don’t see your storage and combo code, so I can only give you a general idea