grid會每次都顯示ds中所有的數據，咱們沒法利用靜態數據好好演示分頁，於是，必須寫後台腳本，讓ext與後台進行數據交互才能看到真實的分頁效果。
咱們盡量在原來的基礎上修改啊，把注意力集中在關鍵部位，一次性突破。
我不會其他語言，後台就用jsp寫啦。有個好消息是只要返回的數據格式一樣，ext才不管後台是什麼寫的呢。也就是這樣，不管你以後用什麼實現後台，前台的ext代碼都一樣。
<%
String start = request.getParameter("start");
String limit = request.getParameter("limit");
try {
int index = Integer.parseInt(start);
int pageSize = Integer.parseInt(limit);
String json = "{totalProperty:100,root:[";
for (int i = index; i < pageSize + index; i++) {
json += "{id:" + i + ",name:'name" + i + "',descn:'descn" + i + "'}";
if (i != pageSize + index - 1) {
json += ",";
}
}
json += "]}";
response.getWriter().write(json);
} catch(Exception ex) {
}
%>
下面我們來解讀這段jsp代碼︰
1.
在進行操作之前，我們先要獲得ext傳遞過來的兩個參數︰start和limit，start指的從第幾個數據開始顯示，limit是說從start開始，一共要用多少個數據，當然返回的數據可能會小於這個值。
2.
咱們在後台類比對100條數據進行分頁，在獲得了start和limit之後再生成json格式的數據。
何謂json？在理論講解之前先看看實例，讓我們能有個感性認識，至於以後能不能昇華到理性認識，就看各位的悟性了。
類比ext訪問後台，並傳遞兩個參數start=0&limit=10，把獲得的數據稍微整理一下，是這個樣子。
{totalProperty:100,root:[
{id:0,name:'name0',descn:'descn0'},
{id:1,name:'name1',descn:'descn1'},
{id:2,name:'name2',descn:'descn2'},
{id:3,name:'name3',descn:'descn3'},
{id:4,name:'name4',descn:'descn4'},
{id:5,name:'name5',descn:'descn5'},
{id:6,name:'name6',descn:'descn6'},
{id:7,name:'name7',descn:'descn7'},
{id:8,name:'name8',descn:'descn8'},
{id:9,name:'name9',descn:'descn9'}
]}
請記住這個數據格式，不管後台是什麼，只要滿足了這樣的格式要求，ext就可以接收處理，顯示到grid中。
我這裡就不好好介紹json，現下只需要知道json裡頭除了name（名稱）就是value（值），值有好幾種格式，如果是數字就不用加引號，如果加了引號就是字元串，如果用[]包裹就是數組，如果出現{}就說明是巢狀的json。諸如此類。
簡單瞄了json一眼，開頭就是totalProperty:100，這告訴ext︰“俺這裡有100個數據呢。”，然後就是root: []，root對應著一個數組，數組裡有10個對象，每個對象都有id呀，name呀，descn呀。這10個數據最後就應該顯示到表格裡。
3.
jsp裡用for循環生成root數組裡的數據，這樣我們翻頁的時候可以看到數據的變化，要不每次都是一樣的數據，你怎么知道翻頁是不是起作用了呢？
最後我們把得到的json字元串輸出到response裡，ext也就可以獲得這些數據了。
結果經過了一番折騰，我們的jsp已經確定可以返回我們所需要的數據了。現下我們可以忘掉後台是用什麼語言寫的了，直接切入ext代碼，看看它是怎么樣才能跑去後台獲得這些數據呢？
因為引入了json作為數據傳輸格式，這次我們要對ext代碼進行一次大換血了，請做好思想準備。
1.
換掉proxy，別在內存裡找了，讓我們透過http獲得我們想要的。
proxy: new Ext.data.HttpProxy({url:'grid.jsp'}),
創建HttpProxy的同時，用url這個參數指定咱們去那裡取數據，我們這裡設定成grid.jsp，就是我們剛才討論的jsp腳本啦。
2.
已經不是數組了，現下要用json咯。
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
看比ArrayReader多了什麼？totalProperty對應咱們jsp返回的totalProperty，也就是數據的總數。root對應咱們jsp返回的root，就是一個包含返回數據的數組。
3.
好了，最後在初始化的時候，告訴我們希望獲得哪部分的數據就可以了。
ds.load({params:{start:0,limit:10}});
就在ds讀取的時候添加兩個參數，start和limit，告訴後台，我們從第一個數可以取起，最多要10個。
在這裡有一個小插曲，如果你按照我們以前的設定，grid是無法正常顯示的，因為ds.load()無法在grid.render()前準備好所有數組， 所以它不知道自己應該實現多高。沒法子，我們只好為它指定一個固定的高度了。像這樣<div id="grid" style="height:265px;"></div>。
最後，我們就可以使用分頁條上那些按鈕試試分頁了。呵呵~就這么簡單。
1.x的例子在lingo-sample/1.1.1/02-06.html，jsp檔案在lingo-sample/1.1.1/grid.jsp，下面是它的截圖︰
有趣的是，1.x中，不需要為div指定高度，它自己就知道如何顯示，不曉得為什麼2.0裡不這樣做呢。
2.0的例子在lingo-sample/2.0/02-06.html，jsp檔案在lingo-sample/2.0/grid.jsp，下面是它的截圖︰
2.7.4. 其實分頁不一定要踩在腳下，也可以頂在頭上。
我的意思是，grid除了FootPanel以外，還有HeaderPanel，意思就是頭頂上的面板。我們把分頁條放在上面也不會有任何問題。1.x中的代碼僅僅是將getFooterPanel改成getHeaderPanel，這樣分頁條就跑到上頭去了。
var gridHead = grid.getView().getHeaderPanel(true);
var paging = new Ext.PagingToolbar(gridHead, ds, {
pageSize: 10,
displayInfo: true,
displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
emptyMsg: '沒有記錄'
});
1.x的例子可以在lingo-sample/1.1.1/02-07.html找到。
2.0就更簡單了，只需要改一個字母，b -> t，呵呵~，讓原來的bbar（bottom bar）變成tbar（top bar）就可以讓我們的工具條登天了。
var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm,
tbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
emptyMsg: "沒有記錄"
})
});
2.0的例子可以在lingo-sample/2.0/02-07.html找到。
呃，當然你可以讓上下都加上分頁條，反正它們最後都是共享一個ds，功能不會有任何問題哈。吼吼。
2.8. 可編輯表格，改變大小，表格間拖拽，樹與表格間拖拽。
