CODEWITHSUNDEEP
javascriptextjscomboboxstore
Upperstage
Upperstage

Reputation: 3757

Ext JS: Proper technique to filter a combobox?

When I filter a combobox by adding a filter to the underlying store, sometimes the filter works (items are removed) and sometimes it has no effect. I have debugged the filterBy function; it is being called and is returning true/false as I wish to filter/show items.

I read on the ExtJS forums that the, "Combobox uses filtering (even with triggerAction:'all'), so your own trigger gets replaced by the one from the combobox." Two filters?

What is the proper technique to remove temporarily items in an Ext JS combobox?

Upvotes: 1

Views: 11026

Answers (4)

adept07
adept07

Reputation: 51

Use lastQuery: '' in the config.

I faced a similar issue where the combo box would show all the items when the trigger is clicked the first time, irrespective of the filter.

To make sure the filter in the store is not cleared the first time the ComboBox trigger is used, configure the combo with lastQuery='' http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.ComboBox-property-lastQuery

Upvotes: 5

martyglaubitz
martyglaubitz

Reputation: 1002

You'll need to delete the property 'lastQuery' of the Combobox, everytime you filter the Store. This is where the ComboBox caches it's Entryset after it build it up the first time.

So doing something like this:

      'window combobox[name=countryselection]' : {
            'change' : function(view, newValue){
                with(Ext.data.StoreManager.lookup('Subcountries')){
                    var combobox = Ext.getCmp('MainWindow').query('combobox[name=subcountryselection]')[0];
                    //force the combobox the rebuild its entryset
                    delete combobox.lastQuery;
                    clearFilter();
                    filter('countryId', newValue);
                }
            }
        }

It works great for me :-)

Upvotes: 1

dmackerman
dmackerman

Reputation: 2966

Keep in mind that filtering does not "recreate" the store with the new data, such that if you filtered a combo with the following values for "apple":

orange
banana
apple

And you clicked on the trigger, "apple" would be shown. However, if you started typing (and have typeAhead: true active, the filtering based on your input will default back to the orange/banana/apple Store.

Upvotes: 0

Imad Moqaddem
Imad Moqaddem

Reputation: 1483

You want to understand how to reproduce the behaviour of triggerAction:'all', so why not diving into the code ?

Here the source code of the Class ComboBox : http://docs.sencha.com/ext-js/4-0/source/ComboBox.html#Ext-form-field-ComboBox-cfg-triggerAction

If you look at the code, you'll see that:

1) When trigger is clicked, method doQuery is called.

onTriggerClick: function() {
    var me = this;
    if (!me.readOnly && !me.disabled) {
        if (me.isExpanded) {
            me.collapse();
        } else {
            me.onFocus({});
            if (me.triggerAction === 'all') {
                me.doQuery(me.allQuery, true);
            } else {
                me.doQuery(me.getRawValue(), false, true);
            }
        }
        me.inputEl.focus();
    }
},

2) In method doQuery, the interesting piece of code is:

if (isLocalMode) {
    // forceAll means no filtering - show whole dataset.
    if (forceAll) {
        store.clearFilter();
    } else {
        // Clear filter, but supress event so that the BoundList is not immediately updated.
        store.clearFilter(true);
        store.filter(me.displayField, queryString);
    }
}

3) We can see that the method filter of the Store is called. You have your answer, the proper technique to remove temporarily items in an ExtJS combobox (in a store generally), is using the method filter on the store.

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-filter

Remember, Your best friend is always documentation! http://docs.sencha.com/ext-js/4-0/#

Upvotes: 4

Related Questions