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

Posted 2023-02-22

【中文标题】Ext js动态更新分页工具栏的总数

【英文标题】：Ext js Updating the total count of a paging toolbar on the fly

【发布时间】：2011-06-22 04:43:00

【问题描述】：

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

我正在使用 ExtJs v.3.3。

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

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

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

问题是分页工具栏并没有反映 store 中的变化，即在 store 重新加载之前，记录的总数是不变的。

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

谢谢

【问题讨论】：

好问题。这个值是从底层商店的阅读器（通过Ext.data.Store.getTotalCount()）获得的，似乎不容易改变。

【参考方案1】：

如果您在分页工具栏中有多个页面，并在本地从商店执行插入/删除操作，则使用下面的 sn-p。

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

【参考方案2】：

这就像 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

【参考方案3】：

当我从第三方 api 获取结果时遇到了类似的问题，该第三方 api 有一个单独的 url 用于项目计数。我创建了一个从分页工具栏继承的新类，并带有一个额外的 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');

【参考方案4】：

这对我来说很好用：

me.gridStore.add(data);

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

【参考方案5】：

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

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

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

【参考方案6】：

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

编辑：

您需要先正确构建响应。根据分页工具栏的API Docs，这就是它的外观。

如果使用 store 的 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" 
]

【讨论】：

这是我的回报声明：success:true

在您的 php 代码中，您需要在响应对象中包含这个 totalProperty。请同时参阅分页工具栏的文档。它将让您很好地了解您需要如何构建代码和查询以获得正确的结果。

另外，分页工具栏不能正常工作，除非你构造结果。

这正是重点，我不需要来自服务器的完全重载结果。服务器只是通知客户端删除操作已成功，他可以安全地从网格中删除记录。我正在寻找一种无需从服务器重新加载完整数据集即可操作分页工具栏的方法。我知道如何发送一个正确的完全加载的结果，并且作为第一个答案中的 bensiu 建议者，我可以调用 doRefresh() 这不是我想要的。

【参考方案7】：

store.totalLength = store.totalLength - 1;

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

【讨论】：

我会检查并通知您

【参考方案8】：

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

(this).YourPagingToolbar.doRefresh()

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

【讨论】：

是的，但这需要我对服务器进行一次不重要的调用。我知道删除是成功的，因为服务器返回成功

所以...您正在使用分页工具栏，但发现需要进行调用？您在处理大量数据吗？

不大，大约有 40 条记录。 （我理解您为什么要问...）关于此的两件事：1）数据量并不意味着服务器在尝试检索数据时必须处理的压力量。可能只是返回小数据集的查询非常复杂。 2) 返回的记录数量不会改变分页工具栏客户端操作选项的必要性。

从分页工具栏的设计角度来看，通过 AJAX 调用使数据存储中的数据状态和数据库表保持同步是否有意义？这样，就不会混淆哪些数据是正确的。

你是对的，分页工具栏应该监听 store on change 事件并反映 store 当前数据。