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:shuyangyang@aliyun.com
 * @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或者其餘數值，可是最終的結果老是第一頁顯示你設置的條數，第二頁就有問題了，暫時還不知道什麼緣由。知道的麻煩告訴我下。


連載中，請你們持續關注，本文出自個人我的網站思考者日記網