最近公司做一个项目用到Ext,其中需要用到一个分页的功能，在网上找了很久，有一些相关的内容，可感觉写都不是很清晰，而且大多数都是用ASP或者PHP之类实现的不是很适合我所做的项目，所以经过查看Ext方面书籍(轻松搞定Extjs),加上自己摸索，终于完成了适合自己使用的一个关于Ext分页功能的实现。项目用的是js、Ext、servlet。下面贴下代码： 

var obj = this; 

var pageSize = 20; //统计结果分页每一页显示数据条数 


//在这里使用Store来创建一个类似于数据表的结构，因为需要远程获取数据，所以应该使用 

//HttpProxy类，我是从后台读取的是json数据格式的数据，所以使用JsonReader来解析； 


var proxy = new Ext.data.HttpProxy({ 

 url:"com.test.check.servlets.QueryDetailServlet" 

}); 

var statTime = Ext.data.Record.create([ 

 {name:"rowNo",type:"string",mapping:"rowNo"}, 

 {name:"gpsid",type:"string",mapping:"gpsid"}, 

 {name:"policeName",type:"string",mapping:"policeName"} 

]); 

var reader = new Ext.data.JsonReader({ 

 totalProperty:"count", //此处与后台json数据中相对应，为数据的总条数 

 root:"data" //这里是后台json数据相对应 

},statTime); 

var store = new Ext.data.Store({ 

 proxy:proxy, 

 reader:reader 

}); 

//定义分页工具条 

var bbarObj = new Ext.PagingToolbar({ 

 pageSize: pageSize, 

 store: store, 

 width: 300, 

 displayInfo: true, //该属性为需要显示分页信息是设置 

 //这里的数字会被分页时候的显示数据条数所自动替换显示 

 displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', 

 emptyMsg: "没有记录", 

 prependButtons: true 

});



在我的项目中使用的是GridPanel来进行显示数据表，所以定义如下： 

var grid = new Ext.grid.GridPanel({ 

 store: store, 

 columns: [ 

 {header:'序号',width: 33, sortable: true,dataIndex:'rowNo',align:'center'}, 

 {id:'gpsid',header:'GPS编号',width: 85, sortable: true,dataIndex:'gpsid',align:'center'}, 

 {header:'警员名称',width: 90, sortable: true,dataIndex:'policeName',align:'center'} 

 ], 

 region:'center', 

 stripeRows: true, 

 title:'统计表', 

 autoHeight:true, 

 width:302, 

 autoScroll:true, 

 loadMask:true, 

 stateful: true, 

 stateId: 'grid', 

 columnLines:true, 

 bbar:bbarObj //将分页工具栏添加到GridPanel上 

 }); 

//在以下方法中向后台传送需要的参数，在后台servlet中可以使用 

//request.getParameter("");方法来获取参数值； 

store.on('beforeload',function(){ 

 store.baseParams={ 

 code: code, 

 timeType: timeType, 

 timeValue: timeValue 

 } 

}); 

//将数据载入，这里参数为分页参数，会根据分页时候自动传送后台 

//也是使用request.getParameter("")获取 

store.reload({ 

 params:{ 

 start:0, 

 limit:pageSize 

 } 

}); 

duty.leftPanel.add(grid); //将GridPanel添加到我项目中使用的左侧显示栏 

duty.leftPanel.doLayout(); 

duty.leftPanel.expand(); //左侧显示栏滑出 


后台servlet获取前台传输的参数： 

response.setContentType("text/xml;charset=GBK"); 

String orgId = request.getParameter("code"); 

String rangeType = request.getParameter("timeType"); 

String rangeValue = request.getParameter("timeValue"); 

String start = request.getParameter("start"); 

String limit = request.getParameter("limit"); 

StatService ss = new StatService(); 

String json = ss.getStatByOrganization(orgId, rangeType, rangeValue, start, limit); 

PrintWriter out = response.getWriter(); 

out.write(json); 

out.flush(); 

out.close();



下面讲以下后台将从数据库查询的数据组织成前台需要的格式的json数据串 

StringBuffer json = new StringBuffer(); 

String jsonData = ""; 

...... 

//这里用前台传来的参数进行数据库分页查询 

int startNum = new Integer(start).intValue(); 

int limitNum = new Integer(limit).intValue(); 

startNum = startNum + 1; 

limitNum = startNum + limitNum; 

...... 

rs = ps.executeQuery(); 

//这里的count即是前台创建的数据格式中的数据总数名称，与之对应，data同样 

json.append("{count:" + count + ",data:[{"); 

int i = startNum - 1; //该变量用来设置数据显示序号 

while(rs.next()){ 

 i = i + 1; 

 //这里的rowNo与前台配置的数据字段名称想对应，下面同样 

 json.append("rowNo:'" + i + "',"); 

 String gpsId = rs.getString("GPSID"); 

 json.append("gpsid:'" + gpsId + "',"); 

 String policeName = rs.getString("CALLNO"); 

 json.append("policeName:'" + policeName + "',"); 

 json.append("},{"); 

} 

jsonData = json.substring(0, json.length()-2); 

jsonData = jsonData + "]}"; 

//组成的json数据格式应该是： 

//{count:count,data:[{rowNo:rowNo,gpsId:gpsId,policeName:policeName},....]}



就这样完成了前台的数据查询交互；
希望我的例子对各位有用。