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"
}
]
}
图示: