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

Extjs Ext js动态更新分页工具栏的总计数,extjs,javascript-framework,Extjs,Javascript Framework,这应该是相当简单的,但我还没有找到一个方法来做到这一点 我使用的是extjsv.3.3 我有一个网格面板,可以通过上下文菜单删除记录 网格有一个附在面板存储区上的分页工具栏 删除过程向服务器发送一个ajax请求,如果成功,我将从存储中删除记录(使用remove方法) 问题是分页工具栏并不反映存储中的更改,即在重新加载存储之前,记录的总量保持不变 有没有办法设置分页工具栏中的记录总数 谢谢在数据库中删除数据后,您是否无法在响应中返回totalProperty值 编辑: 您首先需要正确构建您的响应。

这应该是相当简单的,但我还没有找到一个方法来做到这一点

我使用的是extjsv.3.3

我有一个网格面板,可以通过上下文菜单删除记录

网格有一个附在面板存储区上的分页工具栏


删除过程向服务器发送一个ajax请求,如果成功,我将从存储中删除记录(使用remove方法)

问题是分页工具栏并不反映存储中的更改,即在重新加载存储之前,记录的总量保持不变

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


谢谢

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

编辑:

您首先需要正确构建您的响应。根据分页工具栏的设置,这就是它的外观

如果使用商店的自动加载配置:

  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" }
]
}
“删除过程向服务器发送一个ajax请求,如果成功,我将从存储中删除记录(使用remove方法)…”—这表明您得到了处理“删除”操作的方法—如果您使用Ext.PagingToolbar—只需再添加一行,如下所示:

(this).YourPagingToolbar.doRefresh()


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

store.totalLength=store.totalLength-1


这将改变存储区中的总行数,但我不确定分页工具栏是否会反映出这一变化。

在尝试使用多个分页工具栏(网格的顶部/底部)时,我遇到了类似的情况。页面工具栏中唯一更新显示的位置在存储“加载”时被调用。因此,您可以手动触发事件(但要注意意外后果!)。在我的例子中,当从我的一个工具栏的beforechange侦听器运行时,这种方法效果很好:

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

或者。。。您可以重写或扩展PagingToolbar以添加一个公共方法,该方法将调用或重写onLoad函数

这对我来说很好:

me.gridStore.add(data);

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

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

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

我在添加到dock时添加了一个itemId

    dockedItems: [{
            xtype: 'dynamicpagingtoolbar',
            itemId: 'pager_id',
            dock: 'bottom',
            store: 'CompoundPharmacologyPaginatedStore',
            displayInfo: true
        }],
我向关联存储添加了一个setTotalCount()函数:

setTotalCount: function(count) {
    this.totalCount = count;
}
然后,当您想要更新它时,调用store.setTotalCount(total),然后调用pager.updatePage()。请记住,您必须首先使用以下内容获取寻呼机:


pager=grid_view.down(“#pager_id”)

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

若您在分页工具栏中有多个页面,并且从存储中本地执行插入/删除操作,那个么请使用下面的代码段

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

好问题。此值是从底层存储的读取器(通过
Ext.data.store.getTotalCount()
)获得的,似乎不容易更改。这是我的返回语句:{success:true}在PHP代码中,您需要将此属性包含在响应对象中的totalProperty中。也请参阅页面工具栏的文档。它将让您很好地了解如何构造代码和查询以获得正确的结果。此外,除非您构造结果,否则分页工具栏无法正常工作。这正是问题所在,我不需要来自服务器的满载结果。服务器只是通知客户端删除操作已成功,他可以安全地从网格中删除记录。我正在寻找一种方法来操作分页工具栏,而不必从服务器重新加载完整的数据集。我知道如何发送一个正确的、完全加载的结果,并且正如bensiu在第一个答案中建议的那样,我可以调用doRefresh(),这不是我想要的。是的,但这需要我向服务器发出一个不必要的调用。我知道删除已成功,因为服务器返回successSo。。。您正在使用分页工具栏,但是否发现需要进行调用?您正在处理大量数据吗?不是很大,大约有40条记录。(我理解你为什么要问…)关于这一点有两件事:1)数据量并不意味着服务器在试图检索数据时必须处理的压力。可能只是返回小数据集的查询非常复杂。2) 记录返回的数量不会改变分页工具栏客户端操作选项的必要性。从分页工具栏的设计角度来看,通过AJAX调用保持数据存储中的数据状态与DB表同步难道没有意义吗?这样,就不会混淆哪些数据是正确的。您是对的,分页工具栏应该侦听store on change事件并反映store当前的数据。我会检查一下并让您知道