extjscheckboxfilterstoreextjs4.1

How to handle check and uncheck checkbox field for store in extjs


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


Solution

  • 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/