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或者其他数值，但是最终的结果总是第一页显示你设置的条数，第二页就有问题了，暂时还不知道什么原因。知道的麻烦告诉我下。