ExtJS 4.2: Add/remove custom filter for grid store using a checkbox on the toolbar (local filtering)

EditGrid.js

   (1) Define the custom filter
   
   me.approvedFilter = Ext.create('Ext.util.Filter', {
        id: 'approvedFilter',
        filterFn: function (record) {
            return !record.data.approved;
        }
    });
   
   (2) In the grid panel, define the checkbox in the toolbar
   
   tbar: [
        {
            xtype: 'checkbox',
            boxLabel: 'Hide verified rows',
            itemId: 'showApproved',
            hideLabel: true,
            inputValue: 'true',
            value: 'false',
            margin: '0 10 0 0',
            listeners: {
                change: function (cb, newValue, oldValue) {
                    me.showApproved(newValue);
                }
            }
        }
    ]

    (3) Define the method to apply/remove the filter to the store
    
    showApproved: function (newValue) {
        var me = this;
        if (newValue) {
            me.store.filter(me.approvedFilter);
        } else {
            me.store.removeFilter(me.approvedFilter);
        }
    }