在面板上应用过滤器时，ExtJs pagingtoolbar 不会动态更新

Question

我是 ExtJs 的新手。我有一个商店，它是从 ajax(带有 json)调用中填充的。面板正在显示此商店数据。我在窗口右侧底部也有分页工具栏。第一次加载页面时，它通过从商店中获取来显示正确的记录数。例子:如果商店有 1000 条记录，则“显示 1000 条记录中的 1-100 条”。在面板上应用过滤器(例如:按名称)后，我可以看到 300 条记录。在这种情况下，pagintoolbar 应该向我显示“显示 1-100 条记录，共 300 条。但是 pagingtoolbar 向我显示旧数据，即“显示 1-100 条记录，共 1000 条记录”。当在面板上应用过滤器时，商店没有得到更新

请帮助我在这上面花了很多时间，但仍然一无所获。

请查找代码以供引用

网格和分页工具条代码:

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
});

商店代码:

 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

将此监听器添加到您的商店，它应该可以解决问题:

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