extjs - Ext.PagingToolbar簡介

隨著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官方網站上有提到兩種方式：

1. Ext.ux.data.PagingStore
2. Paging Memory Proxy(examples/ux/PagingMemoryProxy.js)

根據Ext.ux.data.PagingStore作者的說法，PagingMemoryProxy缺點如下：

1. You have to write extra code to remote load the data for the proxy.
2. query, filter and collect only work on the current page. You have to write extra code to use the PagingMemoryProxy filter support.
3. Local sorting works, but you need to set remoteSort:true. There is no remote sorting support.
4. Added and removed records are only remembered for the current page.
5. 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的方式顯示了。