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