Question

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'

Answer 1

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
}