Question

I have a store that loads a grid that displays state name, capital, and Cold Weather.

I also have a checkbox that filters the store depending on the Yes value of ‘Cold Weather’ column.

When I click the checkbox, the grid filters and shows the states that have ‘yes’, but when I uncheck the checkbox, it does nothing.

How can I revert back the store to display previous store? Below is my checkboxfield. Please help.

items: [
    {
        xtype: 'checkboxfield',
        boxLabel: 'Show only Cold State',
        scope: this,
        handler: function (field, value) {
            scope: this,
            this.checkValue = field.getValue();
            console.log(this.checkValue);
            if (this.checkValue == true) {
                this.store.filter('Cold', 'Yes');
            }
            else if (this.checkValue == false) {
            }
        },

UPDATED CODE – when I do this, I get this error

TypeError: tempstore1 is undefined

items: [
    {
        xtype: 'checkboxfield',
        boxLabel: 'Show only Cold State',
        scope: this,
        handler: function (field, value) {
            scope: this,
            this.checkValue = field.getValue();
            console.log(this.checkValue);
            if (this.checkValue == true) {
                var tempstore1 = Ext.StoreMgr.lookup('store');
                tempstore1.filters.add('CheckBoxFilter', new Ext.util.Filter({
                    property: 'Cold',
                    value: 'Yes',
                    root: 'myTable'
                }));
                console.log('here');
                tempstore1.load();
            }
            else if (this.checkValue == false) {
                this.store.filters.removeAtKey('CheckBoxFilter');
            }
        },

2nd UPDATE – now I get this error

TypeError: a.getRoot.call(a, d) is undefined

instead of

var tempstore1 = Ext.StoreMgr.lookup('store');

I am using

var tempstore1 = Ext.getCmp('GridArea1').store;

GridArea1 is the id of my gridpanel.

3rd UPDATE – Now I get this error with

var tempstore1 = Ext.getCmp('GridArea1').getStore();

error from chrome debugger… “true” and “here” are my console.log and so is the “h” part… that is what the tempstore1 has instead of my data..

true
h {hasListeners: e, scope: h, loading: false, events: Object, eventsSuspended: false…}
here
Uncaught TypeError: Cannot read property ‘Cold’ of undefined

Answer 1

You need to use clearFilter()

xtype: 'checkboxfield',
boxLabel: 'Show only Cold State',
scope: this,
handler: function (field, value) {
    this.checkValue = field.getValue();
    console.log(this.checkValue);
    if (this.checkValue == true) {
        this.store.filter('Cold', 'Yes');
    }
    else if (this.checkValue == false) {
        this.store.clearFilter();
    }
}

It is possible to remove a specific filter (clearFilter() removes them all). Instead of using the store.filter('property_to_filter','value') method, use:

store.filters.add('Coldfilter', new Ext.util.Filter({
    property: 'Cold',
    value: 'Yes',
    root: 'data'
}));
store.load();

To remove the filter, use:

store.filters.removeAtKey('Coldfilter');

There was nothing in the docs about root: 'data' to be added in the filter, now it works: http://jsfiddle.net/vrVRP/2/