ExtJs的分页做的相当出色!在此,我们简单的分析一下它的分页方法,看看它出色的功能!
首先,常规上一个简单的分页程序需要有以下参数:
1. 总记录数 -------根据条件总查询的总记录数
2. 每页显示记录数 -------限制每页显示的最大记录
3. 总页码数 -------总共可以分几页
4. 当前页码 -------当前第几页
5. 查询条件 -------查询和翻页两个地方都要用到
接下来,要做的就是根据这些参数做一个好看的翻页控件了,原理我不想多解释-------无非是查询出 总记录数,根据 每页显示记录数 算出总页码数,取分页记录数,show到页面上!翻页时仍然要根据查询条件再做一个相同的操作,计算总记录数再分页----因为很有可能查询的总记录数在并发操作中会增多或减少!
其次:ExtJS却让我们从这繁杂的工作中解脱啦!
在GridPanel中使用分页控件需要提供以下参数:
1.总记录数
2.每页显示记录数
3.查询条件
OK,在GridPanel中添加上Ext.PagingToolbar就搞定啦!
例子:
var pgSize=5; //=====提供每页显示记录数给分页控件
//===============================查询列表=============================
//====================bookDtore======================
var bookProxy=new Ext.data.HttpProxy({url:'getbookList.action'});
// reader
var dataMeta2=new Object({
totalRecords: "count", //=======提供总记录数给翻页控件
record: "Book",
id: "id"
});
var bookRecord=new Ext.data.Record.create([
{name:'bookid',mapping:'id'},
{name:'booktypeid',mapping:'booktypeid'},
{name:'bookName',mapping:'bookName'},
{name:'booktypeName',mapping:'booktypeName'},
{name:'author',mapping:'author'},
{name:'price',mapping:'price'},
{name:'brief',mapping:'brief'},
{name:'createDate',mapping:'createDate'}
]);
var bookReader=new Ext.data.XmlReader(dataMeta2,bookRecord);
// store
var bookStore=new Ext.data.Store({
proxy:bookProxy,
reader:bookReader
});
//====================grid========================
var topBookTypebar=new Ext.Toolbar([
{text:'新增书籍',iconCls:'add',handler:addBook},
{text:'修改书籍',iconCls:'edit',handler:editBook},
{text:'删除书籍',iconCls:'delete',handler:deleteBook}
]);
var sm=new Ext.grid.CheckboxSelectionModel();
// cm
var bookcm=new Ext.grid.ColumnModel([
sm,
{header:'书籍名称',dataIndex:'bookName',sortable:true,width:160},
{header:'书籍类型',dataIndex:'booktypeName',sortable:true,width:160},
{header:'作者',dataIndex:'author',sortable:true,width:160},
{header:'创建日期',dataIndex:'createDate',sortable:true,width:160},
{header:'价格',dataIndex:'price',sortable:true,width:160},
{header:'备注',dataIndex:'brief',sortable:true,width:160},
{header:'id',dataIndex:'bookid',sortable:true,hidden:true,width:160}
]);
var bookgrid=new Ext.grid.GridPanel({
title:'书籍列表',
frame:true,
store:bookStore,
sm:sm,
cm:bookcm,
autoHeight:true,
renderTo:'griddiv',
tbar:topBookTypebar,
bbar: new Ext.PagingToolbar({ //-======定义翻页控件
pageSize:pgSize, // 参数1:每页显示数
store: bookStore, // 数据源---非常重要
displayInfo:true,
displayMsg:'显示第{0}条数据到{1}条数据,一共有{2}条',
emptyMsg:'没有记录'
})
});
bookStore.load({ // -=====页面自动加载
params:{ // =====分页参数
start:0, // =====向后台提供 当前页码
limit:pgSize // =====向后台提供 每页显示记录数
}
});
非常明显:
1.总记录是由给GridPanel提供数据源的Store提供,在它的DataMeta的totalRecords: "results", 参数总提供,当然这是我们Action中计算出来的
2.每页显示的记录数由PagingToolbar的pageSize:pgSize参数提供,因此这个参数一般是我们定义的一个变量
有人会问:那查询条件呢??我翻页时候查询条件该怎么获得并传递到后台呢?
这个问题问的非常好!!!!
ExtJs已经为我们解决了这个问题,我们只需要把查询条件放在Store的baseParams参数中就可以了,ExtJS会自动把它放入“隐藏域”,在翻页时调用!
demo如下:
var subButton=new Ext.Button({
text:'查 询',
handler:function(){
if(createDate.getValue()!=''){
var pdate = createDate.getValue();
var mm = pdate.getMonth() + 1;
var dd= pdate.getDate();
var mvalue;
var dvalue;
if(mm<10){
mvalue='-0'+mm;
}else{
mvalue='-'+mm;
}
if(dd<10){
dvalue='-0'+dd;
}else{
dvalue='-'+dd;
}
var strPdate = pdate.getFullYear() + mvalue + dvalue ;
}
bookStore.on('beforeload',function(){ // =======翻页时 查询条件
bookStore.baseParams={
'book.bookName':bookName.getValue(),
'book.booktype.id':booktypeSelect.getValue(),
'book.createDate':strPdate
}
});
bookStore.reload({ // =======翻页时分页参数
params:{
start:0,
limit:pgSize
}
});
}
});
var retButton=new Ext.Button({
text:'重 置',
handler:function(){
form1.getForm().reset();
}
});
开始做你的分页测试吧。。。。。。。
分享到:
相关推荐
Extjs分页使用java实现数据库数据查询.docx
extjs 分页 从dao到action
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用
SSH+ExtJs分页小例子
一个extjs的分页控件,就是可以选择一页显示多少条记录,该控件非常灵活,便于集成
extjs4.2 分页combo动态条数 源码,不懂的加群
extjs的pagingtoolbar 点击下一页时,出现store的load时间,但是只有start和limit这两个参数,这样就出现了,点击下一页的时候,查询出 的结果和条件不符合。虽然可以通过一次性查出所有记录的方法解决,但是我更...
extjs hibernate spring java direct开发的单页面应用,包括产品的浏览、增加、编辑和修改,进仓单和出仓单的浏览、增加、编辑和修改,库存统计、用户管理、角色管理。
extjs 富客户端界面设计 grid分页后台处理
Struts2+Json+ExtJS分页 资料来自互联网,及供参考学习。
extjs 简单分页例子。 只有js文件 后台 代码自己可以采用 觉得好的技术实现。
我们开发项目的时候,有的时候左边的树结点很多,虽然说有extjs有异步,但还是有结点下面有时长达500个以上,甚至更多,这个时候用分页可以解决这个问题
NULL 博文链接:https://lucky16.iteye.com/blog/1522254
详细介绍了EXTJS中gridpanel分页技术的解析
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...
Extjs+springmvc登录注册,分页,sqlserver08
在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 因为我开发测试完这个分页工具后, 电脑上显示刚好是15:00, 所以取名: PM3PagingToolbar 如有BUG还请各位提出或留言. ...
ExtJS分页功能
主要是springmvc和mybatis整合ehcache,以及ExtJs简单的分页!
肯定有用,extjs4要好好看啊,很简单的,容易上手