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: "沒有記錄" //沒有資料時顯示資訊         })

得到以下的效果，本次我把介面又換了種黑色風格，如下：
650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131229/1223144303-0.jpg" border="0" style="margin:0px;padding:0px;border:medium none;line-height:22.390625px;font-family:'宋體', arial, helvetica, 'san-serif';font-size:14px;background-color:#ffffff;" alt="5893591b426081ac24444e10a5c14032.jpg" />
上面的資料只是我簡單的在頁面靜態定義的，但是咱們怎麼通過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，大功告成，看下效果：
650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131229/1223141U1-1.jpg" border="0" style="margin:0px;padding:0px;border:medium none;line-height:22.390625px;font-family:'宋體', arial, helvetica, 'san-serif';font-size:14px;background-color:#ffffff;" alt="34bd28610efe03d83f9b2c73f62cd640.jpg" />
在這裡我發現了個問題，儘管我在前台設定了pageSize為10或者其他數值，但是最終的結果總是第一頁顯示你設定的條數，第二頁就有問題了，暫時還不知道什麼原因。知道的麻煩告訴我下。


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

本文出自 “On My Way” 部落格，請務必保留此出處http://shuyangyang.blog.51cto.com/1685768/1332885