Search code examples
extjsextjs4filteringstore

ExtJS 4: Dynamic store filtering


I have a filter specified in filters config of the store:

Ext.define('Record', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'value',
        type: 'number'
    }]
});

Ext.create('Ext.data.Store', {
    id: 'store',
    model: 'Record',

    filters: [
        function(item) {
            return item.get('value') > 2;
        }  
    ],

    sorters: [{
        property: 'value',
        direction: 'DESC'
    }],

    data: [{
        value: 2,
    }, {
        value: 1
    }, {
        value: 3
    }]
});

Ext.create('Ext.view.View', {
    store: Ext.data.StoreManager.lookup('store'),
    tpl: new Ext.XTemplate(
        '<tpl foreach=".">',
            '<div class="record">{value}</div>',
        '</tpl>'
    ),
    itemSelector: '.record',
    emptyText: 'No records',
    renderTo: Ext.getBody()
});

It is only applied if I explicitly call filter() on the store. The filterOnLoad is not set and defaults to true, so the store must be filtered. How can I keep the store always filtered (whenever any CRU action is performed and after load)?


Solution

  • To accomplish this it's needed to add listeners to the store on adding and updating events:

    listeners: {
        add: function(store) {
            store.filter();
        },
    
        update: function(store) {
            store.filter();
        }
    },