ExtJS: Using gridpanel filter Header ignores/resets the store filter that I added

Question

I am loading my store and grid panel and assigning a filter like so

myGrid.store.filter('enabled', 'true');

This is to filter out records that are not enabled. This works, my gridpanel initially shows all records that are enabled equal to true. Then when I apply a filter using the gridpanel header and search for a record that I know has enabled set to false NOW appears.

The initial gridpanel list after initially assigning store.filter(....) removes all records that don't have enabled equal to true but filtering with the header includes it in the new filter.

I followed the docs here : http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.ux.grid.FiltersFeature

So I have something like this :

 Ext.apply(me, {
        width: 500,
        height: 250,
        store: 'BlockItems',
        features: [{
            ftype: 'filters',
            local: true,

After removing the filter from the header I am left with my list again but now it includes records that enabled != true and also enabled == true i.e All records.

I am very confused. I have filtered my store, so why is the grid "header filter" no complying with the filter I initially added ?

Answer 1

You can add new filters by creating new instances of Ext.util.Filter and add them to the filters of the store.

I have the following code in my select event of a gridheader combobox:

this.up('grid').getStore().filter(new Ext.util.Filter({
    anyMatch: false,
    disableOnEmpty: true,
    property: field.up('gridcolumn').dataIndex,
    value   : field.getValue()
}));

And this is the code of the keyup of the combobox:

if (Ext.isEmpty(field.getValue()) && isValidKey === true) {
    this.up('grid').getStore().filter(new Ext.util.Filter({
        anyMatch: false,
        disableOnEmpty: true,
        property: field.up('gridcolumn').dataIndex,
        value   : field.getValue()
    }));
}

And this is the keyup of a gridheader textfield:

grid.getStore().filter(new Ext.util.Filter({
    anyMatch: true,
    disableOnEmpty: true,
    property: field.up('gridcolumn').dataIndex,
    value   : field.getValue()
}));

They work perfectly together as you can see in my Sencha Fiddle