Filtering a comboxes remote store locally in ExtJs

4
votes

I have an ExtJs combobox. Its store loaded using JSON (using MyStore class below). I want to load all the values to the store, and then filter them with the text entered in the combo's textfield (preferably using the typeAhead feature).

The problem is that I want to do the filtering on the client side (combo's mode property is 'remote', by default). I don't want my combo to reload its store every time I type something. How can I do that?

Thanks.

Here's 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 the combo :

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

4 Answers

8
votes

To achieve this you must:

  1. Construct MyStore class with "isAutoLoad" config option as "true"
  2. In your combobox config set the "mode" config option to "local" (see Built the combo config code bellow for another config)

Here is my short example:

Construct myStoreData variable

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

Built the combo config

{
     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
}
2
votes

You will want to use the store.filter() method. You can use this to use user-entered information to filter your store that the combo box uses. 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
}
]);
2
votes

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

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

1
votes

Add listener to your store on 'load' event, do filtering, by removing or flagging records, if removing it is clear load to combo component, if flagging you need to recognize those flaggs in combo and display or not...

It hard to go with more details if I do not see your code for store and combo, so I can give you only general idea