Hi everyone

I'm playing around with a grid and a form with combos for filtering. That grid is only shows static records, so i use a local array. The solution I currently use is to add a Ext.utilFilter object with a filterFn callback, and when the user changes a value in the form, a pagingToolbarComponent.doRefresh() call is done. The filtering works well and correctly, the problem is, that the toolbar still shows the wrong information. Eg.: On start the grid has 1000 records on 10 pages, after filtering it has 150 records on two pages. The grid shows that, but the info in the toolbar still shows 1000, page 1 of 10, and i can still navigate to the third, fourth ... page, which are now empty of course. How can I tell the toolbar to use the filtered records count?

The code looks something like this:

Code:
var
    gridStore = Ext.create('Ext.data.Store', {
        model: 'MyModel',
        id: "gridStore",
        remoteSort: true,
        filters: [new Ext.util.Filter({
            filterFn: filterNameBySelection
        })],
        proxy: {
            type: 'pagingmemory',
            data: DataProvider.getAsArray(),
            reader: {
                type: 'array'
            }
        }
    }),
    panelOptions = {
        layout: "border",
        width: 860,
        height: 600,
        items: [{
            xtype: "form",
            width: 232,
            collapsible: true,
            region: "west",
            defaults: {
                width: 210
            },
            items: [{
                xtype: "label",
                html: "General options"
            },{
                xtype: "checkbox",
                name: "available",
                id: "available",
                fieldLabel: "Only available",
                bubbleEvents: ["check"]
            },
            listeners: {
                check: function() {
                    Ext.getCmp("gridPager").doRefresh();
                }
            }
        },{
            xtype: "grid",
            region: "center",
            store: gridStore,
            disableSelection: true,
            stripeRows: true,
            columns: [{
                text: 'Name',
                sortable: true,
                dataIndex: 'name',
            }],
            bbar: Ext.create('Ext.toolbar.Paging', {
                pageSize: 30,
                store: gridStore,
                id: "gridPager",
                displayInfo: true,
                listeners: {
                    afterrender: function(cmp) {
                        cmp.getComponent("refresh").hide();
                    }
                }
            })
        }]
    },
    displayPanel = Ext.create('Ext.Panel', panelOptions);

    displayPanel.render('panelContainer');
    gridStore.load({params: {start: 0, limit: 30}});