Ext js分页全显了有界面没有分页,不用数据库和后台怎么做

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ext js分页全显了有界面没有分页,不用数据库和后台怎么做相关的知识,希望对你有一定的参考价值。

虽然ext并没有直接为我们提供内存分页功能,但是在ext2.0/examples/loacle/目录下提供了一个PagingMemoryProxy.js的扩展,它可以让我们从本地数组读取,并实现内存分页。

其余自己找例子吧
参考技术A bbar : new Ext.PagingToolbar(
pageSize : 20,
store : ds,
displayInfo : true,
displayMsg : '显示第 0 条到 1 条记录,一共 2 条',
emptyMsg : "没有记录"
)

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

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

我使用的是ExtJs v.3.3。

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

网格具有附加到面板商店的分页工具栏。

删除过程向服务器发送ajax请求,成功后我从商店中删除记录(使用remove方法)。

问题是分页工具栏没有反映商店中的变化,即在重新加载商店之前记录的总量不变。

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

谢谢

答案

这就像ExtJs ver 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
另一答案

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

编辑:

您需要首先正确构建您的响应。根据分页工具栏的API Docs,它应该如何显示。

如果使用商店的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" }
]
}
另一答案

这对我很好:

me.gridStore.add(data);

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

从第三方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);
    }
}

});

我在添加到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.updatePager()。请记住,您将首先使用类似的东西获取寻呼机

pager = grid_view.down('#pager_id');

另一答案

“删除过程向服务器发送ajax请求,成功后我从商店中删除记录(使用remove方法)......” - 这表明你有方法处理“删除”操作 - 如果你使用Ext .PagingToolbar - 只需再添加一行,如下所示:

(this).YourPagingToolbar.doRefresh()

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

另一答案

store.totalLength = store.totalLength - 1;

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

另一答案

尝试使用多个分页工具栏(网格的顶部/底部)时,我遇到了类似的情况。分页工具栏中唯一更新显示的地方在商店'load'上调用。因此,您可以手动触发事件(但要注意意外后果!)。在我的情况下,当从我的一个工具栏的beforechange监听器运行时,这很好用:

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

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

另一答案

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

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 js分页全显了有界面没有分页,不用数据库和后台怎么做的主要内容,如果未能解决你的问题,请参考以下文章

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

请教jquery dataTable能否实现跨页全选

Ext Js 分页不适用于 ExtDirect 网格面板

Ext JS 4.2 中的分页内存代理等效技术是啥

extjs ext5 Ext.grid.Panel 分页,搜索

Ext.grid 分页