隨著records的增加，Browser會花更多的時間在畫grid，Ext.PagingToolbar主要用來處理這樣的問題，透過傳遞參數的方式(start:第幾筆開始，limit:共要幾筆)，告知Server要傳送哪些資料。
注意，Ext.PagingToolbar只是告知Server要顯示的資料為何，而Ext.PagingToolbar預設會顯示所有的資料。
因為要讀取Server的資料，所以Store.proxy改用Ext.data.HttpProxy。而讀取的格式我們打算用json，所以，store.reader要用Ext.data.JsonReader。
我們的json file(phone_num.json)如下：
{
"success": true,
"results": 12, // how many entry will be sent.
"rows": [ // *Note: this must be an Array
{ "city": "台北市", "num": "02"},
{ "city": "新竹市", "num": "03"},
{ "city": "苗栗縣", "num": "037"},
{ "city": "台中市", "num": "04"},
{ "city": "南投縣", "num": "049"},
{ "city": "嘉義市", "num": "05"},
{ "city": "台南市", "num": "06"},
{ "city": "高雄市", "num": "07"},
{ "city": "屏東縣", "num": "08"},
{ "city": "台東縣", "num": "089"},
{ "city": "馬祖", "num": "0836"},
{ "city": "烏坵", "num": "082"}
]
}
Ext.onReady(function() {
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{
header: 'City',
dataIndex: 'city'
}, {
header: 'Num',
dataIndex: 'num'
}
]);
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'phone_num.json'}),
reader: new Ext.data.JsonReader({
totalProperty: 'results',
root: 'rows',
fields: [{name: 'city'}, {name: 'num'}]
})
});
store.load();
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
store: store,
cm: cm,
sm: new Ext.grid.RowSelectionModel(),
viewConfig: {
forceFit: true
},
title: "區碼",
loadMask: true,
height: 200,
width: 330,
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: store,
displayInfo: true
})
});
});
由於，我們在Server-Side都只是把整個資料丟給client，所以，grid即便有Ext.PagingToolbar，但是還是會顯示所有由Server丟過來的資料。
Paging with Local Data
在local paging官方網站上有提到兩種方式：
- Ext.ux.data.PagingStore
- Paging Memory Proxy(examples/ux/PagingMemoryProxy.js)
根據Ext.ux.data.PagingStore作者的說法，PagingMemoryProxy缺點如下：
- You have to write extra code to remote load the data for the proxy.
- query, filter and collect only work on the current page. You have to write extra code to use the PagingMemoryProxy filter support.
- Local sorting works, but you need to set remoteSort:true. There is no remote sorting support.
- Added and removed records are only remembered for the current page.
- Changing the page is relatively slow (PagingMemoryProxy reprocesses all data).
PagingStore.js for ext-js v3
PagingStore.js for ext-js v2
以下是v2的code：
Ext.onReady(function() {
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: 'City', dataIndex: 'city'},
{header: 'Num', dataIndex: 'num'}
]);
var store = new Ext.ux.data.PagingStore({
proxy: new Ext.data.HttpProxy({url: 'phone_num.json'}),
reader: new Ext.data.JsonReader({
root: 'rows',
totalRecords: 'results',
fields: [{name: 'city'}, {name: 'num'}]
})
});
store.load({params:{start:0, limit: 4}});
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
store: store,
cm: cm,
sm: new Ext.grid.RowSelectionModel(),
viewConfig: {
forceFit: true
},
title: "區碼",
loadMask: true,
height: 200,
width: 330,
bbar: new Ext.PagingToolbar({
pageSize: 4,
store: store,
displayInfo: true
})
});
});
可以看到，Server一樣丟全部的資料，但是Grid已經可以以paging的方式顯示了。
