extjs grid 分页 java_Extjs gridPanl中本地数据分页

在EXtjs的gridPanl中store数据，分页的时候，一般是请求远程后台的数据，但是现在有需求，要对前台的本地数据进行分页

解决的办法(两种)：

方法一：这里我们要用到一个插件：

我用的是extjs3.4所以下载的是：

下载好这个外部的js之后，我们要和extjs的js一样，把它引入进来

之后，我们可以使用了;

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的本地分页了，你点击下一页，和刷新，都是本地请求 ，不会远程请求了。

下载地址：

使用，首先引入js

接着使用本地数据：

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中分页的工具条的使用和方法一一致。

后续有很多开发填坑的文章发布，如果对你有帮助，请支持和加关注一下

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