Ext js 4 簡單實現分頁查詢續--客戶端分頁

之前介紹了後臺分頁,這次因爲需求,不得不改成客戶端分頁,也就是一次把所有數據從後臺讀到前臺,保存到內存中,再執行分頁操作.

 

這個方法的先決條件是需要一個ext-all.js裏沒有的組件:

PagingMemoryProxy.js

(參考位置:ext-4.2.1.883\examples\ux\data\PagingMemoryProxy.js)

 

把它和ext-all.js一樣引用後纔可以直接使用.

 

代碼同樣很簡單

1首先設置一個store的數據結構:

var storeAnalysisModelFields = [{ name: 'FS_NAME' }, { name: 'FS_POSITION' }];

Ext.define('storeAnalysisModel', {
    extend: 'Ext.data.Model',
    fields: storeAnalysisModelFields
});

// 每頁顯示記錄數
var itemsPerPage = 10;
// 分頁查詢store
var storeAnalysis = Ext.create('Ext.data.Store', {
    model: 'storeAnalysisModel',
    pageSize: itemsPerPage,
    proxy: {
        type: 'pagingmemory'
    }
    
});
function storeAnalysisLoad()
{
    storeAnalysis.load(
        {
            params: {
                start: 0,
                limit: itemsPerPage
            }
        }
        );
}

2再定義要綁定的panel: 
 / ValuePanel = new Ext.grid.GridPanel({

        title: '參數值',
        split: true,
        region: "south",
        height: 300,
        xtype: 'grid',
        store: storeAnalysis,
        columns: ValuePanelColumns,
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: storeAnalysis,
            dock: 'bottom',
            emptyMsg: '沒有數據',
            displayInfo: true,
            displayMsg: '當前顯示{0}-{1}條記錄 / 共{2}條記錄 ',
            beforePageText: '第',
            afterPageText: '頁/共{0}頁'
        }]
　　});
　　

3最後動態給store的proxy的data賦一個json對象值,load一下就行了,列如:

// 讀取全部json數據
function LoadStoreAnalysis() {
    $.ajax({
        type: "POST",
        url: appPath + "/ExploredReserves/InitlistFieldData",
        data: "in_strListID=" + GetlistID() + "&in_iGasOliType=0",
        success: function (msg) {
            resjson = Ext.decode(msg);
            storeAnalysis.proxy.data = resjson;
            storeAnalysis.load();
            }
    });