ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据

大家想想，上节中我们做的表格，如果有成千上万条的数据显示在表格里，然后滚动条查看数据，显然不是什么好办法，而且效率上也不允许。实际上，表格控件对性能的要求较高。在一个页面上放3个表格，就可以感觉到响应变慢。在表格里显示成千上万条数据，效率就可想而知了。
所以说分页是必不可少的，接下来我们就来看EXT提供的分页工具条。

//创建表格 
    var grid = new Ext.grid.GridPanel({ 
        renderTo:'grid', //渲染位置 
        autoHeight:true, 
        store:store, 
        columns:columns, //显示列 
        stripeRows:true, //斑马线效果 
        //enableColumnMove: false, //禁止拖放列 
        //enableColumnResize: false, //禁止改变列宽度 
        loadMask:true, //显示遮罩和提示功能,即加载Loading…… 
        //forceFit:true //自动填满表格 
        bbar:new Ext.PagingToolbar({ 
            pageSize:10, //每页显示几条数据 
            store:store,  
            displayInfo:true, //是否显示数据信息 
            displayMsg:'显示第 {0} 条到 {1} 条记录，一共  {2} 条', //只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据 
            emptyMsg: "没有记录" //没有数据时显示信息 
        })

得到以下的效果，本次我把界面又换了种黑色风格，如下：

上面的数据只是我简单的在页面静态定义的，但是咱们怎么通过Java后台传递这些数据呢？
我这里用了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; 
                
/**
 * 用户Servlet
 * <a href="http://home.51cto.com/index.php?s=/space/1269642" target="_blank">@author</a> shuYangYang
 * @email:[email protected]
 * @website:[url]www.shuyangyang.com.cn[/url]
 */ 
@SuppressWarnings("serial") 
public class UserServices extends HttpServlet { 
                
    <a href="http://home.51cto.com/index.php?s=/space/5017954" target="_blank">@Override</a> 
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
            throws ServletException, IOException { 
        doPost(req,resp); 
    } 
                
    <a href="http://home.51cto.com/index.php?s=/space/5017954" target="_blank">@Override</a> 
    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); 
            System.out.println(index); 
            System.out.println(pageSize); 
                            
            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(); 
        } 
    } 
                
}

今晚正在装MySQL数据库，这里就不在数据库读取了，怕浪费时间，我在后台模拟对100条数据进行分页，在获得了start和limit之后生成JSON格式的数据。
获得的数据通过测试程序打印出来，如下：
{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>

接下来对表格的属性做下调整：

//定义列 
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:'/ExtJs4.2Pro/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:550, 
    columns:columns, //显示列 
    bbar: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}});

OK，大功告成，看下效果：

在这里我发现了个问题，尽管我在前台设置了pageSize为10或者其他数值，但是最终的结果总是第一页显示你设置的条数，第二页就有问题了，暂时还不知道什么原因。知道的麻烦告诉我下。


连载中，请大家持续关注，本文出自我的个人网站思考者日记网