在WEB应用的开发中经常会遇到要分页的情况,使用ExtJs的时候,也同样会遇到这样的问题。
我们来看下ExtJs中如何为我们对分页提供帮助的。
我们讨论一般情况。
我们在页面上显示分页,一般都是在gridpanel中,因此,我们就gridPanel作为例子来说。
分页有控件,它就是 Ext.PagingToolbar
Ext3.0文档 写道
一个要和Ext.data.Store参与绑定并且自动提供翻页控制的工具栏。A specialized toolbar that is bound to a Ext.data.Store and provides automatic paging control. This Component loads blocks of data into the Store passing parameters who's names are specified by the store's paramNames property.
如果需要查看文档,可以在网上自行下载。
查看一个例子
// 分页工具栏
var bbar = new Ext.PagingToolbar({
pageSize : 3,
store : store,
displayInfo : true,
beforePageText : "第",
displayMsg : '显示 {0}-{1}条 / 共 {2} 条',
emptyMsg : '无数据'
});
对于上面的属性的一些解释
pageSize: 每页要展现的记录数(默认为 20)。The number of records to display per page (defaults to 20)
store :翻页工具栏应该使用Ext.data.Store作为它的数据源(在需要的时候)。The Ext.data.Store the paging toolbar should use as its data source (required).
displayInfo :为true时展示展现信息(默认为false)。True to display the displayMsg (defaults to false)
beforePageText :在页数前显示的字符
displayMsg :显示的具体分页信息
emptyMsg :当没有数据的时候显示的信息
下面的是指定的Store的定义
/*
* 页面中要使用到的分页store
*/
var store = new Ext.data.JsonStore({
url : 'user!findAllUser.action',
root : 'userlist',
totalProperty : 'totalCount',
idProperty : 'id',
fields : ["id", "username", "password", "firstname",
"secondname", "sex", "email", "mobilenumber", "hobby",
"birth"]
});
totalProperty : 'totalCount',则是后台给前台传的页面信息中表示数据集中记录的总数。
这里使用的是JsonStore作为例子,那么在后台向前台传数据的时候需要传一个字段“'totalCount'”,在前台解析的时候,会把该字段解析出来,当成总条数显示在总条数的位置
以上呢,是前台ExtJs的写法。
而完全完成分页还需要前后台共同的合作。
对于后台,会在收到请求数据的时候收到前台提供的分页数据。我们可以在前台手动传入参数。代码如下
grid.getStore().load({
params : {
start : 0,
limit : 3
}
});
如果不传,Ext框架会默认传两个值,在后台用getParameter("start ") 和getParameter("limit ")能获取到
后台根据前台传的值需要写出配套的后台代码,根据开始值start ,每页限制条数limit 返回记录,并且还需要根据totalProperty : 'totalCount'的配置,向前台提供数据总条数。