Ext js 动态更新分页工具栏的总数

Question

这应该相当简单，但我还没有找到方法。

我正在使用 ExtJs v.3.3。

我有一个网格面板，允许使用上下文菜单删除记录。

网格有一个附加到面板存储的分页工具栏。

删除过程向服务器发送一个ajax请求，成功后我从存储中删除记录（使用remove方法）。

问题是分页工具栏不反映商店中的更改，即在商店重新加载之前记录总数保持不变。

有没有办法可以设置分页工具栏中的记录总数？

谢谢

Answer 1

这对于 ExtJs 版本 4.1.3 来说就像一个魅力。

gridStore.add(record);                    //Add the record to the store    
gridStore.totalCount = gridStore.count(); //update the totalCount property of Store
pagingToolbar.onLoad();                   //Refresh the display message on paging tool bar

Answer 2

数据库中的数据被删除后，是否无法在响应中返回totalProperty值？

编辑：

您需要首先正确构建您的响应。根据分页工具栏的 API 文档，它应该是这样的。

如果使用商店的 autoLoad 配置：

  var myStore = new Ext.data.Store({
    reader: new Ext.data.JsonReader({
        totalProperty: 'results', 
        ...
    }),
    ...
    });
    var myStore = new Ext.data.Store({
    autoLoad: {params:{start: 0, limit: 25}},
    ...
    });

从服务器发回的数据包将具有以下形式：

{
"success": true,
"results": 2000, 
"rows": [ // *Note: this must be an Array 
    { "id":  1, "name": "Bill", "occupation": "Gardener" },
    { "id":  2, "name":  "Ben", "occupation": "Horticulturalist" },
    ...
    { "id": 25, "name":  "Sue", "occupation": "Botanist" }
]
}

Answer 3

这对我来说效果很好：

me.gridStore.add(data);

// Manually update the paging toolbar.
me.gridStore.totalCount = 500;
me.pagingToolbar.onLoad();

Answer 4

当从第三方 api 获取结果时，我遇到了类似的问题，该第三方 api 有一个单独的项目计数 url。我创建了一个继承自 pagingtoolbar 的新类，并附加了 updatePager() 函数：

updatePager : function(){
    var me = this,
        pageData,
        currPage,
        pageCount,
        afterText,
        count,
        isEmpty;

    count = me.store.getCount();
    isEmpty = count === 0;
    if (!isEmpty) {
        pageData = me.getPageData();
        currPage = pageData.currentPage;
        pageCount = pageData.pageCount;
        afterText = Ext.String.format(me.afterPageText, isNaN(pageCount) ? 1 : pageCount);
    } else {
        currPage = 0;
        pageCount = 0;
        afterText = Ext.String.format(me.afterPageText, 0);
    }

    Ext.suspendLayouts();
    me.child('#afterTextItem').setText(afterText);
    me.child('#inputItem').setDisabled(isEmpty).setValue(currPage);
    me.child('#first').setDisabled(currPage === 1 || isEmpty);
    me.child('#prev').setDisabled(currPage === 1  || isEmpty);
    me.child('#next').setDisabled(currPage === pageCount  || isEmpty);
    me.child('#last').setDisabled(currPage === pageCount  || isEmpty);
    me.child('#refresh').enable();
    me.updateInfo();
    Ext.resumeLayouts(true);

    if (me.rendered) {
        me.fireEvent('change', me, pageData);
    }
}

});

在添加到扩展坞时，我向其中添加了一个 itemId

    dockedItems: [{
            xtype: 'dynamicpagingtoolbar',
            itemId: 'pager_id',
            dock: 'bottom',
            store: 'CompoundPharmacologyPaginatedStore',
            displayInfo: true
        }],

，我向关联的商店添加了一个 setTotalCount() 函数：

setTotalCount: function(count) {
    this.totalCount = count;
}

然后，当您想要更新它时，请调用 store.setTotalCount(total)，然后调用 pager.updatePager()。请记住，您将首先使用

pager = grid_view.down('#pager_id');之类的方法获取寻呼机

Answer 5

“删除过程向服务器发送 ajax 请求，成功后我从存储中删除记录（使用删除方法）...” - 这表明您拥有处理“删除”操作的方法 - 如果您使用 Ext .PagingToolbar - 只需再添加一行，如下所示：

(this).YourPagingToolbar.doRefresh()

我将 (this) 放入 () 中，因为您没有提供任何代码示例，所以我不确定您是如何定义的它

Answer 6

商店.totalLength = 商店.totalLength - 1;

这将改变商店中的总行数，但我不确定分页工具栏是否会反映此更改。

Answer 7

当我尝试使用多个分页工具栏（网格的顶部/底部）时，我遇到了类似的情况。分页工具栏中唯一更新显示的位置在商店“加载”时被调用。因此，您可以手动触发事件（但要注意意想不到的后果！）。就我而言，当从我的工具栏之一的 beforechange 侦听器运行时，效果很好：

myStore.fireEvent('load', myStore, myStore.data.items, myStore.lastOptions);

或者...您可以覆盖或扩展 PagingToolbar 以添加一个公共方法，该方法将调用或覆盖 onLoad 函数

Answer 8

如果分页工具栏中有多个页面，并从商店本地执行插入/删除操作，则使用以下代码片段。

updatePagingToolbar: function (pagingToolbar) {
    var store = pagingToolbar.getStore()
    , affectedChanges = store.getCount() - store.config.pageSize;

    if (pagingToolbar.store.totalCount > store.config.pageSize)
        pagingToolbar.store.totalCount += affectedChanges;
    else
        pagingToolbar.store.totalCount = store.getCount();
    pagingToolbar.onLoad();
}