Extjs gridPanl中本地數據分頁

在EXtjs的gridPanl中store數據，分頁的時候，通常是請求遠程後臺的數據，可是如今有需求，要對前臺的本地數據進行分頁

解決的辦法（兩種）：

方法一：這裏咱們要用到一個插件：

Ext.ux.data.PagingStore

下載地址：http://www.sencha.com/forum/showthread.php?71532-Ext.ux.data.PagingStore-v0.5

我用的是extjs3.4因此下載的是：

下載好這個外部的js以後，咱們要和extjs的js同樣，把它引入進來

 

<script type="text/javascript" src="extjs/ux/PagingStore.js"></script>

以後，咱們能夠使用了;

 

 

var localData = [];
    var AssignDisStore = new Ext.ux.data.PagingArrayStore({//本地數據分頁
        fields:[
            {name:'id', mapping:'id'},
            {name:'name', mapping:'name'}
        ],
        data:localData,
        lastOptions:{params:{start:0, limit:10}}
    });

這是本地的數據，AssignDisStore也是gridPanel中store的數據值；

bbar:new Ext.PagingToolbar({
                                store:AssignDisStore,
                                pageSize:pageSize,
                                prependButtons:true,
                                displayInfo:true,
                                displayMsg:'當前顯示第 {0} 到 {1}條,共 {2}條',
                                emptyMsg:"沒有記錄信息"
                            }),

這是gridPanel中分頁的工具條；

這樣就完成了gridPanel的本地分頁了，你點擊下一頁，和刷新，都是本地請求 ，不會遠程請求了。

方法二：用到組件：PagingMemoryProxy.js

下載地址：

http://dev.sencha.com/deploy/ext-3.4.0/examples/ux/PagingMemoryProxy.js

使用，首先引入js

 

<script type="text/javascript" src="extjs/ux/PagingMemoryProxy.js"></script>

接着使用本地數據：

 

 

var localData=[];
    var AssignDisStore = new Ext.data.Store({
        proxy: new Ext.ux.data.PagingMemoryProxy(localData),
        remoteSort:true,
        reader: new Ext.data.ArrayReader({}, [
            {name:'id'},
            {name:'name'}
        ])
    });

其中，localData數據，咱們經過ajax賦值給本地：

 

 

afterrender:function () {
                    Ext.Ajax.request({
                        url:'distributorAssign/getDistributor.json',
                        params:{
                            id:id
                        },
                        success:function (response) {
                            var data = Ext.decode(response.responseText).distributor;
                            var distributorFieldSet = relateDistributorWin.get(0).get(1);
                            localData = [];//先清空數據
                            for (var i = 0, v; v = data[i]; i++) {
                                distributorIds.push(v.id);
                                localData.push([v.id,v.companyName]);
                            }
                            AssignDisStore.proxy = new Ext.data.PagingMemoryProxy(localData);//PagingMemoryProxy()一次性讀取數據
                            AssignDisStore.load({params:{start:0, limit:10}});
                            distributorFieldSet.doLayout();
                        }
                    });

gridPanel中分頁的工具條的使用和方法一一致。

 

 

後續有不少開發填坑的文章發佈，若是對你有幫助，請支持和加關注一下

http://e22a.com/h.05ApkG?cv=AAKHZXVo&sm=339944

https://shop119727980.taobao.com/?spm=0.0.0.0