Extjs 分页技术详细介绍和baseParams属性介绍
分页原理:
1.Extjs分页是根据store.load({params:{start:0,limit:10}}); 中start,limit这两个参数来进行分页的。
(1).当store第一次load的时候,start=0,limit=10;
(2).当点击翻页按钮时,store进行load,此时 start=start+pageSize。
2.为了分页Json字符串中要加上totalProperty来表示记录的总条数。
如:totalProperty:'total'
3.后台的返回json中必须包含有totalProperty属性的字段。
如:string json = "{'total':"+count+",'root':[{},{}]";
baseParams与Store.load({params:{}})的区别:
(1).baseParams里的参数是一直存在的,
(2).params里的参数,只有load时才会传递过去,当调用reload时参数就不存在了
一.分页语句:
new Ext.PagingToolbar({ pageSize: pageSize, store: store, displayInfo: true, displayMsg: '当前显示 {0} - {1} ,共{2}条记录', emptyMsg: "没有数据", items: ['-'] })
二.注意事项:
1.分页中用到的store必须加上“totalCount”属性!!!
2.store加载时也需要给定start和limit两个参数来进行分页查询
3.重新加载时:
(1).若用reload,可不用再设置分页的start和limit参数;
(2).若还是用load,则还是要继续设置该参数;
三.实例分析:
1.Store:
/*-----1.创建数据源------*/ var newsStore = new Ext.data.JsonStore({ url:"getNews.ftl?doType=getNews", root:"data", totalProperty:'totalCount', fields: ["id","title","type","creator",{ name: 'createDate', type: 'date', dateformat: 'Y-m-d'},"ishot"] });
2.ColumnModel:
/*-----3.创建ColumnModel------*/ var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel({ columns:[ sm, { header:"编号", dataIndex:"id", hidden:true },{ header:"新闻标题", dataIndex:"title", width:500 },{ header:"新闻类型", dataIndex:"type", width:120, renderer:function(v){ if(v == 1){ return "通知公告" } else { return "企业动态"; } } },{ header:"是否热点新闻", dataIndex:"ishot", width:140, renderer:function(v){ if(v == 1){ return "<span style=\"color:#ff44aa;font-weight: bold;\">热点新闻</span>" } else { return "普通新闻"; } } },{ header:"创建者", dataIndex:"creator", width:140 },{ header:"创建时间", dataIndex:"createDate", width:140, renderer : Ext.util.Format.dateRenderer('Y-m-d') } ] });
3.GridPanel:
var newsGrid = new Ext.grid.GridPanel({ title:"新闻管理", store:newsStore, cm:cm, sm:sm, view:newsView, loadMask:{msg:"正在加载数据,请稍后......"}, height:80, tbar:[ { text:"增加新闻", iconCls: 'add', handler:function(){ location.href = "addNews.jsp"; } },{ text:"编辑新闻", iconCls:"edit", handler:showUpdateWin },{ text:"删除新闻", iconCls:"remove", handler:removeNews },{ text:"发布新闻", iconCls:"audit", handler:removeNews },{ text:"预览新闻", iconCls: 'view', handler:viewNews },"-",{ id:"byTitle", xtype:"label", text:"标题:" },{ id:"paras", xtype:"textfield", enableKeyEvent:true, listeners:{ "specialKey":function(f,e){ if(e.getKey() == e.ENTER){ var paras = Ext.getCmp("paras").getValue(); var type = Ext.getCmp("byType").getValue(); newsStore.baseParams.pParas = paras; newsStore.baseParams.pType = type; newsStore.reload(); //newsStore.load({params:{start:0,limit:pageSize}}); } } } },"-",{ xtype:"label", text:"类型:" },{ id:"byType", xtype:"combo", value:'', width:90, mode : 'local', triggerAction :'all', forceSelection:true, store : new Ext.data.SimpleStore({ fields : ["id", "name"], data : [ ['', '全部'], ['0', '企业动态'], ['1', '通知公告'] ] }), valueField : "id", displayField : "name", readOnly: true },"-",{ text: '搜索', iconCls: 'filter', listeners:{ "click":function(){ var paras = Ext.getCmp("paras").getValue(); var type = Ext.getCmp("byType").getValue(); newsStore.baseParams.pParas = paras; newsStore.baseParams.pType = type; newsStore.reload(); //newsStore.load({params:{start:0,limit:pageSize}}); } } } ], bbar:new Ext.PagingToolbar({ pageSize: pageSize, store: newsStore, displayInfo: true, displayMsg: '当前显示 {0} - {1} ,共{2}条记录', emptyMsg: "没有数据", items: ['-'] }) });
4.在Ext初始化时对store的load事件加入start和limit参数:
Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = path + '/js/ext/resources/images/default/s.gif'; Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); Ext.QuickTips.init(); new Ext.Viewport({ layout: 'fit', items: [newsGrid] }); newsStore.load({params:{start:0,limit:40}}); /*解决日期控件在谷歌浏览器中的样式问题*/ if(Ext.isChrome==true){ var chromeDatePickerCSS = ".x-date-picker {border-color: #1b376c;background-color:#fff;position: relative;width: 185px;}"; Ext.util.CSS.createStyleSheet(chromeDatePickerCSS,'chromeDatePickerStyle'); } });
5.Servlet代码:
String paras = request.getParameter("pParas"); String typeStr = request.getParameter("pType");; String startStr = request.getParameter("start")==null?"0":request.getParameter("start"); String limitStr = request.getParameter("limit")==null?"0":request.getParameter("limit"); if (typeStr == null || typeStr.equals("")) { typeStr = "-1"; } int type = Integer.valueOf(typeStr); int start = Integer.valueOf(startStr); int limit = Integer.valueOf(limitStr); INewsDao newsDao = new NewsDaoImpl(); int count = newsDao.getNewsCount(type, paras); String data = newsDao.getNews(start, limit, type, paras); String json = "{\"totalCount\":" + count + ",\"data\":" + data + "}"; response.setContentType("text/json;charset=UTF-8"); out = response.getWriter(); out.print(json); out.close(); return;
6.获取News新闻信息的Dao方法:
public String getNews(int start, int limit, int type, String paras) { Session s = null; String data = null; try { s = HibernateUtil.getSession(); s.beginTransaction(); StringBuffer sb = new StringBuffer("select * from news"); if (paras != null && !paras.equals("")) { sb.append(" where title like '%" + paras + "%'"); if (type != -1) { sb.append(" and type ="+type); } }else if (type != -1) { sb.append(" where type = " + type); } sb.append(" order by create_date desc"); SQLQuery query = s.createSQLQuery(sb.toString()); query.setFirstResult(start) .setMaxResults(limit);//分页 List<News> list = query.addEntity(News.class).list(); data = JSON.toJSONString(list);//通过fastjson将list转成json字符串 s.getTransaction().commit(); } catch (Exception e) { logger.error(e.toString()); HibernateUtil.endSession(s); } finally { HibernateUtil.endSession(s); } return data; }
注意:获取到的list要用FastJson转化成Json字符串
获取到的List(News)转化成的Json数据:
[ { "content": " 测试上传文件34", "createDate": "2014-12-10 15:57:51", "creator": "管理员", "dir": "D:\\Program Files\\apache-tomcat-7.0.27\\webapps\\czfc\\newsHtmls\\2014\\12", "fileName": "1418198271600.html", "id": 146, "ishot": 0, "status": 1, "tag": "测试上传文件", "title": "测试上传文件", "type": 1, "uploadDir": "D:\\newsFile\\2014\\12", "uploadFile": "HtmleditorDemo.rar" }, { "content": "坚持以提高经济发展质量和效益为中心,主动适应经济发展新常态,保持经济运行在合理区间。", "createDate": "2014-12-09 09:44:39", "creator": "管理员", "dir": "D:\\Program Files\\apache-tomcat-7.0.27\\webapps\\czfc\\newsHtmls\\2014\\12", "fileName": "1418089479358.html", "id": 136, "ishot": 1, "status": 1, "tag": "“新常态”思路下,2015年经济增长目标会否下调,是否会降息、降准,明年经济工作的主要任务又会重点聚焦哪些领域,持续引发关注。", "title": "聚焦中央经济工作会议:新常态下经济增速引关注", "type": 1, "uploadFile": "news.txt" } ]
最终传回页面的带totalCount的Json数据:
{ "totalCount": 2, "data": [ { "content": " 测试上传文件34", "createDate": "2014-12-10 15:57:51", "creator": "管理员", "dir": "D:\\Program Files\\apache-tomcat-7.0.27\\webapps\\czfc\\newsHtmls\\2014\\12", "fileName": "1418198271600.html", "id": 146, "ishot": 0, "status": 1, "tag": "测试上传文件", "title": "测试上传文件", "type": 1, "uploadDir": "D:\\newsFile\\2014\\12", "uploadFile": "HtmleditorDemo.rar" }, { "content": "坚持以提高经济发展质量和效益为中心,主动适应经济发展新常态,保持经济运行在合理区间。", "createDate": "2014-12-09 09:44:39", "creator": "管理员", "dir": "D:\\Program Files\\apache-tomcat-7.0.27\\webapps\\czfc\\newsHtmls\\2014\\12", "fileName": "1418089479358.html", "id": 136, "ishot": 1, "status": 1, "tag": " “新常态”思路下,2015年经济增长目标会否下调,是否会降息、降准,明年经济工作的主要任务又会重点聚焦哪些领域,持续引发关注。", "title": "聚焦中央经济工作会议:新常态下经济增速引关注", "type": 1, "uploadFile": "news.txt" } ] }
图示:
相关推荐
extjs 分页 从dao到action
SSH+ExtJs分页小例子
Extjs分页使用java实现数据库数据查询.docx
详细介绍了EXTJS中gridpanel分页技术的解析
一个extjs的分页控件,就是可以选择一页显示多少条记录,该控件非常灵活,便于集成
extjs 简单分页例子。 只有js文件 后台 代码自己可以采用 觉得好的技术实现。
extjs4.2 分页combo动态条数 源码,不懂的加群
extjs 富客户端界面设计 grid分页后台处理
extjs的前台和后台的传值的方法及特点
我们开发项目的时候,有的时候左边的树结点很多,虽然说有extjs有异步,但还是有结点下面有时长达500个以上,甚至更多,这个时候用分页可以解决这个问题
extjs的pagingtoolbar 点击下一页时,出现store的load时间,但是只有start和limit这两个参数,这样就出现了,点击下一页的时候,查询出 的结果和条件不符合。虽然可以通过一次性查出所有记录的方法解决,但是我更...
extjs属性方法集中方便你查看学习,赶快来下载吧!学习extjs
NULL 博文链接:https://lucky16.iteye.com/blog/1522254
Struts2+Json+ExtJS分页 资料来自互联网,及供参考学习。
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...
Extjs+springmvc登录注册,分页,sqlserver08
非传统分页工具. 简单说明下: 显示第一页与最后一页. 显示当前页对称的前后几页(可以自定义显示多少页). 其它的页码省略. 点击省略号, 省略号隐藏, 显示一个与省略号相同宽度的页面跳转转入框. 整个设置还比较智能....
extjs增删改查分页树
Extjs & Ext.net中的一些属性
主要是springmvc和mybatis整合ehcache,以及ExtJs简单的分页!