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