Extjs 4.2.1 Local filtering of Grid panel with Paging

Question

Fiddle with the problem is here https://fiddle.sencha.com/#view/editor&fiddle/2o8q

There are a lot of methods in the net about how to locally filter grid panel that have paging, but no one is working for me. I have the following grid

var grid = Ext.create('Ext.grid.GridPanel', {                     
                store: store, 
                bbar: pagingToolbar,
                columns: [getColumns()],
                features: [{
                    ftype: 'filters',
                    local: true,
                    filters: [getFilters()],
                }],
          }

Filters here have the form (just copy pasted part of my filters object)

    {
        type: 'string',
        dataIndex: 'name',
        active: false
    }, {
        type: 'numeric',
        dataIndex: 'id',
        active: false
    },

The store is the following

var store = Ext.create('Ext.data.Store', {
                    model: 'Store',
                    autoLoad: true,
                    proxy: {
                        data: myData,
                        enablePaging: true,
                        type: 'memory',
                        reader: {
                            type: 'array',
                        }
                    },
                });

Here myData - comes to me in the form of

["1245", "Joen", "Devis", "user", "", "email@com", "15/6/2017"],

["9876", "Alex", "Klex", "user", "", "email@com", "15/6/2017"],[...

Also I have the the pagingToolbar

 var pagingToolbar = Ext.create('Ext.PagingToolbar', {
                    store: store, displayInfo: true
                });

So all the elements use the store I declared in the top. I have 25 elements per grid page, and around 43 elements in myData. So now I have 2 pages in my grid. When I am on first page of grid and apply string filter for name, for example, it filters first page (25 elements), when I move to 2d page, grid is also filtered, but in scope of second page. So as a result each page filters seperately. I need to filter ALL pages at the same time when I check the checkbox of filter, and to update the info of pagingToolbar accordingly. What I am doing wrong?

Answer 1

Almost sure that it is a late answer, but I have found the local store filter solution for paging grid you are probably looking for:

https://fiddle.sencha.com/#fiddle/2jgl

It used store proxy to load data into the grid instead of explicitly specify them in store config.

In general:

1. create empty store with next mandatory options

....
    proxy: {
        type: 'memory',
        enablePaging: true,
        ....
    },
    pageSize: 10,
    remoteFilter: true,
....

2. then load data to the store using its proxy instead of loadData method

store.getProxy().data = myData;
store.reload()

3. apply filter to see result

store.filter([{ property: 'name', value: 'Bob' }]);

See President.js store configuration in provided fiddle example for more details.

Hope it helps