Extjs gridPanl中本地数据分页-CSDN博客

在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

转载于:https://my.oschina.net/baishi/blog/161363