在项目中遇到Grid前端分页，本人也是刚接触extjs没多久，为了实现效果，一直找了很久才实现出来，对于代码中的一些也不能详细的说明出来，
不知道能不能帮助到遇到同样问题的朋友，所以将例子代码贴出来大家一起相互学习下。
在项目中时常会用到前端分页的效果，使用grid来进行分页，
在源代码中\examples\ux\data\PagingMemoryProxy.js，此时要使用该js文件，在项目引用该文件。
<script type="text/javascript" src="ux/data/PagingMemoryProxy.js"></script>
分页的工具条是 Ext.toolbar.Paging类，xtype：pagingtoolbar，该工具绑定的store数据和grid绑定数据一样，
dockedItems: [{
xtype: 'pagingtoolbar',
store: me.mystore,
dock: 'bottom',
cls: "smallPagingToolBar",
inputItemWidth: 50,
displayInfo: true,
doRefresh: function () {
me.refresh();
}
}
创建store数据时要注意proxy，本人在使用时不太理解该属性中的信息，只能按照复制粘贴，创建的store数据会根据指定的pageSize，进行自行分页
me.mystore = Ext.create("Ext.data.Store", {
fields: me.gridFilds,
pageSize: 5, // 指定每页显示2条记录
autoLoad: true,
data: me.gridData, /*生成的数组数据*/
proxy: {
type: 'pagingmemory', /*引用的PagingMemoryProxy类*/
reader: {
type: 'json',
totalProperty:'total'
}
}
});
以下是完整代码：
Ext.onReady(function(){
// Ext.Msg.alert("提示","hello world！！！")
Ext.define("MyGridPanel",{
/*静态数据，可以从后台获取*/
gridData:[
{id:"1001",name:"wind",tel:"18603071234"},
{id:"1002",name:"小月",tel:"18603073578"},
{id:"1003",name:"冷清雪",tel:"18603073569"},
{id:"1004",name:"布隆",tel:"18603073214"},
{id:"1005",name:"莫甘娜",tel:"18603072568"},
{id:"1006",name:"阿里",tel:"18603073247"},
{id:"1001",name:"阿卡丽",tel:"18603071563"},
{id:"1001",name:"卡特",tel:"18603074758"},
{id:"1001",name:"死歌",tel:"18603072354"},
], //保存数据
totalCount:0, //数据总条数
pageSize:5, //每页显示的条数
mystore:null, // 创建的store数据对象
myGridPanel: null , //GridPanel对象
gridFilds:[], //数据列模型
/* 构建一个GridPanel组件 */
CreateGridPanel:function(){
/* 创建列数据 */
var gridColumn = [{
header: "用户ID",
dataIndex: "id",
width:100,
hideable: false,
sortable: true,
draggable: false,
}, {
header: "用户名",
width: 180,
dataIndex: "name",
hideable: false,
sortable: true,
draggable: false,
}, {
header: "手机号",
flex:1,
dataIndex: "tel",
}];
var me = this;
for (var i = 0; i < gridColumn.length; i++) {
me.gridFilds.push(gridColumn[i].dataIndex);
}
/* 构建一个store数据 */
me.totalCount = me.gridData.length;
me.mystore = Ext.create("Ext.data.Store", {
fields: me.gridFilds,
pageSize: me.pageSize, // 指定每页显示2条记录
autoLoad: true,
data: me.gridData,
proxy: {
type: 'pagingmemory',
reader: {
type: 'json',
totalProperty:'total'
}
}
});
var picker = Ext.create("Ext.grid.Panel", {
store: me.mystore,
columns: gridColumn,
layout:"fit",
height:350,
enableColumnHide: false,
sortableColumns: false,
autoScroll: true,
columnLines: true,
noDefaultSelect: true, //不默认选择第一行
viewConfig:{
stripeRows:true,//在表格中显示斑马线
},
dockedItems: [{
xtype: 'pagingtoolbar',
store: me.mystore,
dock: 'bottom',
cls: "smallPagingToolBar",
inputItemWidth: 50,
displayInfo: true,
doRefresh: function () {
me.refresh();
}
}, {
xtype: "toolbar",
dock: "top",
height: 40,
style: "padding-bottom:0;border-bottom:1px solid #ddd !important",
items: [{
xtype: 'textfield',
name: 'fastKey',
fieldLabel: '查找',
labelWidth: 40,
labelAlign: "right",
emptyText: "没有查询到数据", // 分页没有数据时，分页右侧显示的内容
width: 230,
listeners: {
change: function (a) {
/*过滤查询*/
me.filterData();
}
}
}, {
xtype: "displayfield",
value: "可选择信息("
}, {
xtype: 'label',
style: "color:red",
text: me.totalCount,
name: "totalCount"
}, {
xtype: "displayfield",
value: ")条"
}, "->"]
}]
});
return picker;
},
refresh:function(){
//清空筛选输入框的数据,
var fastKey = this.myGridPanel.query("[name='fastKey']")[0];
fastKey.setValue("");
/*重新加载数据*/
this.filterData();
},
/*筛选数据*/
filterData: function () {
var me = this;
var fastKey = me.myGridPanel.query("[name='fastKey']")[0];
var searchValue = fastKey.getValue().toString().toLowerCase(),
newData = []; //newData保存筛选出来的数据
if (searchValue == "") {
newData = me.gridData;
} else {
for (var i = 0, len = me.gridData.length; i < len; i++) {
for (var j = 1, jlen = me.gridFilds.length; j < jlen; j++) {
if (me.gridData[i][me.gridFilds[j]] && me.gridData[i][me.gridFilds[j]].toString().toLowerCase().indexOf(searchValue) >= 0) {
newData.push(me.gridData[i]);
break;
}
}
}
}
/*重新加载数据*/
me.myGridPanel.store.loadData(newData);
me.myGridPanel.store.getProxy().data = newData; //更新在缓存的数据
me.myGridPanel.store.loadPage(1); //重新刷新
me.myGridPanel.query("[name='totalCount']")[0].setText(newData.length);
},
/*创建窗体*/
CreateWindow:function(){
/*构建gridpanel组件*/
var me = this;
me.myGridPanel = me.CreateGridPanel();
var win = Ext.create("Ext.window.Window",{
title:"Grid前端分页",
width:500,
height:400,
id:"MyWindow",
renderTo:Ext.getBody(),
items:me.myGridPanel
});
win.show();
}
});
var mygridpanel = Ext.create("MyGridPanel");
mygridpanel.CreateWindow();
});
效果图：
