ExtJs pagingtoolbar is not getting dynamically updated when the filters are applied on the Panel

Question

I am new to ExtJs.I have a store which was populated from the ajax (with json)call. the Panel is displaying this store data. i have also have the pagingtoolbar on rightside bottom of the window. for the first time when the page is loaded it is displaying correct number of records by taking from the store. example: if store has 1000 records then "Displaying 1-100 of 1000 records". After applying the filters(ex: by name) on the Panel i can see 300 records. in this case pagintoolbar should show me like "Displaying 1-100 of 300.But the pagingtoolbar is displaying me the old data i.e "Displaying 1-100 of 1000 records".the store is not getting updated when the filters are applied on the Panel

Please help me am spending to much time on this but still couldn't get anything.

Please find the code for your reference

Grid and pagingtoolbar code:

var securityGrid = Ext.create('Ext.grid.Panel', {
        id: 'pcdbSecurityDetailGrid',
        dockedItems: [menuToolbar, sortToolbar],
        store: requestDetailStore,
        selModel: openSm,
        loadMask: true,
        selType: 'cellmodel',
        sortableColumns : false,
        columns: [
              {text: '<div class="edit">&nbsp;</div>', width: 30, dataIndex: 'write', filter: {type: 'string'}, locked:true, sortable: false,
                    renderer:function(val, meta, r){
                        if(val == 'Y') {
                            return Ext.String.format('<div class="edit" onclick="javascript:handleLockingForClick(null, 4, {0});">&nbsp;</div>',  r.get("detailId"));
                        } else {
                            return '';   //handleLockingForClick(record, dataIndex, detailId)
                        }
                    }
                 },
    {text: "Individual Security<br/>Response", width: 100,  dataIndex: 'singleResponseFlag', filter: {type: 'string' }, sortable: false}
        ],
        bbar: Ext.create('Ext.PagingToolbar', {
            store: requestDetailStore,
            displayInfo: true,
            displayMsg: 'Displaying records {0} - {1} of {2}',
            emptyMsg: "No Data to display"
        }),
        columnLines: true
});

Store code:

 var requestDetailStore = Ext.create('Ext.data.JsonStore', {
        id: 'requestDetailStoreId',
        model: 'RequestDetail',
        pageSize: 200,
        //remoteSort: true,

        proxy: {
             type: 'ajax',
             timeout :900000,
             url: 'getPriceChallengeRequestDetailData.htm',
             reader:{
                 type: "json",
                 root: "pcdbData",
                 totalProperty: 'totalCount',
                 idProperty: "detailId"
             },
             listeners: {
                 'exception' : function (proxy, response, operation, eOpts) {
                     if(response.status == 200) {
                         if(response.responseText.indexOf("sessiontimeout") > 0) {
                             needConfirm = 0;
                             window.location = 'logout.htm';
                         }
                     }
                 }
             }
        }
    });

Answer 1

Add this listener to your store and it should do the trick:

listeners: {
    filterchange : function (store) {
        var toolbar = Ext.ComponentQuery.query('pagingtoolbar')[0];
        store.totalCount = store.count();
        toolbar.onLoad();
    }
}