ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-12/175.html
------------------------------------------------------------------------------------------
效果图:
这里用servlet技术简单处理下:
UserServices.java
package cn.com.shuyangyang.services; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @SuppressWarnings("serial") public class UserServices extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req,resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String start = req.getParameter("start"); String limit = req.getParameter("limit"); try{ int index = Integer.parseInt(start); int pageSize = Integer.parseInt(limit); String json = "{total:100,root:["; for(int i = index;i<pageSize+index;i++){ json +="{id:"+i+",name:'name"+i+"',descn:'desc"+i+"'}"; if(i!=pageSize + index - 1){ json+=","; } } json+="]}"; resp.getWriter().write(json); }catch(Exception e){ e.printStackTrace(); } } }
获得的数据通过测试程序打印出来,如下:
{totalProperty:100,root:[
{id:0,'name:'name0',descn:'desc0'},{id:1,'name:'name1',descn:'desc1'},{id:2,'name:'name2',descn:'desc2'},{id:3,'name:'name3',descn:'desc3'},
{id:4,'name:'name4',descn:'desc4'},{id:5,'name:'name5',descn:'desc5'},{id:6,'name:'name6',descn:'desc6'},{id:7,'name:'name7',descn:'desc7'},
{id:8,'name:'name8',descn:'desc8'},{id:9,'name:'name9',descn:'desc9'}
]}
请记住这个格式,不管你的后台是神马,是PHP还是C#等,只要满足了这样的格式要求,Ext就可以接受并处理,然后显示到表格中。简单看下JSON数据,totalProperty:100这里表示一共有100条数据。然后就是root:[],root对应着一个数组,数据里有10个对象,每个对象都有id,name和descn。这10条数据最后就应该显示到表格里。
我的servlet配置如下:
<servlet> <servlet-name>userService</servlet-name> <servlet-class>cn.com.shuyangyang.services.UserServices</servlet-class> </servlet> <servlet-mapping> <servlet-name>userService</servlet-name> <url-pattern>/userServlet</url-pattern> </servlet-mapping>
接下来是js代码:
/** * Grid * 此js演示了如何通过后台获得分页数据 */ //表格数据最起码有列、数据、转换原始数据这3项 Ext.onReady(function(){ //定义列 var columns = [ {header:'编号',dataIndex:'id',width:50}, //sortable:true 可设置是否为该列进行排序 {header:'名称',dataIndex:'name',width:80}, {header:'描述',dataIndex:'descn',width:112} ]; //转换原始数据为EXT可以显示的数据 var store = new Ext.data.Store({ proxy:{ type:'ajax', url:'/extjsTest1/userServlet', reader:{ type:'json', totalProperty:'total', root:'root', idProperty:'id' } }, fields:[ {name:'id'}, //mapping:0 这样的可以指定列显示的位置,0代表第1列,可以随意设置列显示的位置 {name:'name'}, {name:'descn'}, {name:'status'} ] }); //创建表格 var grid = new Ext.grid.GridPanel({ renderTo:'grid', //渲染位置 autoHeight:true, store:store, width:570, columns:columns, //显示列 forceFit:true, //自动填满表格 bbar:new Ext.PagingToolbar({ pageSize:25, //每页显示几条数据 store:store, displayInfo:true, //是否显示数据信息 displayMsg:'显示第 {0} 条到 {1} 条记录,一共 {2} 条', //只要当displayInfo为true时才有效,用来显示有数据时的提示信息,{0},{1},{2}会自动被替换成对应的数据 emptyMsg: "没有记录" //没有数据时显示信息 }), tbar:new Ext.PagingToolbar({ pageSize:25, //每页显示几条数据 store:store, displayInfo:true, //是否显示数据信息 displayMsg:'显示第 {0} 条到 {1} 条记录,一共 {2} 条', //只要当displayInfo为true时才有效,用来显示有数据时的提示信息,{0},{1},{2}会自动被替换成对应的数据 emptyMsg: "没有记录" //没有数据时显示信息 }) }); //加载数据 store.load({params:{start:0,limit:25}}); });
在这里我发现了个问题,尽管我在前台设置了pageSize为10或者其他数值,但是最终的结果总是第一页显示你设置的条数,第二页就有问题了,暂时还不知道什么原因。知道的麻烦告诉我下。