ExtJS5 存储过滤器“未捕获的类型错误：无法读取未定义的属性‘get’”

Question

I'm using the gpl version of extjs5.1.1 without sencha cmd.
In my application a Grid displays correctly a Store.
In the window, there is a checkbox wich code is :

{
    xtype    : 'checkbox',
    itemId   : 'employeeFilter',
    value    : false,
    boxLabel : 'Show inaktiv users',
    margin   : '0 5 0 5',
    listeners: {
        change: function(checkbox, newValue, oldValue, eOpts) {
            var store = this.up('window').getComponent('employeeGrid').getStore();
            if (newValue) {
                console.log('clearFilter');
                store.clearFilter();
            } else {
                console.log('rightFilter');
                store.rightFilter();
            }
        }
    }
}]

The variable store points to the grid store correctly. I can see the messages 'clearFilter' and 'rightFilter' in the console.

The store code:

Ext.define('Chronos.store.manage.Employees', {
    extend : 'Ext.data.Store',

    model      : 'Chronos.model.manage.Employee',
    autoLoad   : false,
    autoSync   : true,
    sortOnLoad : false,
    pageSize   : 0,

    rightFilter: function() {
        this.filterBy(function(record) {
            return record.get('rights') >= 0;
        });
    },

    proxy : {
        type   : 'ajax', // Ext.data.proxy.Ajax
        api    : {
            create  : 'api/management/employees.create.php',
            read    : 'api/management/employees.read.php',
            update  : 'api/management/employees.update.php',
            destroy : 'api/management/employees.destroy.php'
        },
        reader : {
            type         : 'json', // Ext.data.reader.Json
            rootProperty : 'records'
        },
        writer : {
            type         : 'json', // Ext.data.writer.Json
            encode       : true,
            rootProperty : 'record'
        }
    }
});

On window call, the checkbox is unchecked and the filter is active because the grid listeners is:

    listeners: {
        render: function() {
            this.getStore().load();
            this.getStore().rightFilter(); // <<<<< if the function is called here, the problem exists, if not, the filter works perfectly !
        }
    },

The first time I check the checkbox the filter is cleared correctly and the message 'clearFilter' appears in the console. When I uncheck it, the message 'rightFilter' appears too, but the filter does not anything in the grid... and the error message "Uncaught TypeError: Cannot read property 'get' of undefined" appears.

Where am I wrong?

Edit : Actually the filter function only works fine once. It does not work any more after clearFilter is called...
I tried with addFilter / removeFilter with the same result.
My next try will be setDisable .
If someone has any (other) idea...

Edit 2: Test case in fiddle
Now I know that the problem comes from function call in the render function. When this call is not done, the checkbox works perfectly, but on show, the checkbox state does not correspond to the display and I want to hide filtered items on show.

Any Idea ?

Answer 1

The filter function cannot be called just after the load, that's why load in render and filter in viewready (in afterrender it doesn't work either). The problem is solved !!

    listeners: {
        render: function() {
            this.getStore().load();
        },
        viewready: function() {
            this.getStore().rightFilter();
        }
    }

Answer 2

The problem is in this line is with this .

rightFilter: function() {
        this.filterBy(function(record) { // <<<<< this line sends an error the second time the function is called
            return record.get('rights') >= 0;
        });
    },

Can you please change the above code to

rightFilter: function(me) {
me.filterBy(function(record) { // <<<<< this line sends an error the second time the function is called
return record.get('rights') >= 0;
});
},

and the grid listener to pass store

listeners: {
        render: function() {
            this.getStore().load();
            this.getStore().rightFilter(this.getStore());
        }
    },

and the calling from combobox to

if (newValue) {
                console.log('clearFilter');
                store.clearFilter();
            } else {
                console.log('rightFilter');
                store.rightFilter(store);
            }