为Grid添加分页工具条
在GridPanel配置中增加以下代码：
bbar:new Ext.PagingToolbar({
pageSize:10, // 每页显示10条记录
displayInfo:true,// 显示提示信息
displayMsg:"显示第{0}条到第{1}条,共{2}条数据",
emptyMsg:"没有数据",
store:store
})
这个是在底部增加一个分页工具条，显示效果如图：
分页工具条的属性：
pageSize:每页显示多少条数据。
displayInfo:是否显示数据信息。
displayMsg:当displayInfo为true时有效，用来显示有数据时的提示信息。{0},{1},{2}会自动被替换成相应的数据。
emptyMsg:没有数据时显示的信息。
注意：如果配置了分页工具条，则store.load()就应该在创建GridPanel之后执行，否则分页工具条将不起作用。
13.2后台获取分页数据
使用JSON传输数据，那么需要做下面更改：
1.Proxy使用HttpProxy，代码：
proxy:newExt.data.HttpProxy({url:'../../../ext_paging.jsp'}),
2.Reader使用Ext.data.JsonReader，代码：
reader:newExt.data.JsonReader({
totalProperty:"total",// 总共多少条记录
root:"root",// 数据数组
id:"id",// 标识每一条数据，可选
fields:["id","name","sex","birthday","description"]// 包含的数据fields
})
对应的JSON数据格式：
var json = {total:100,root:[
{id:0,name:'name0',sex:'man',description:'description0',birthday:'2000-10-20'},
{id:1,name:'name1',sex:'woman',description:'description1',birthday:'2000-10-20'},
{id:2,name:'name2',sex:'man',description:'description2',birthday:'2000-10-20'},
{id:3,name:'name3',sex:'woman',description:'description3',birthday:'2000-10-20'},
{id:4,name:'name4',sex:'man',description:'description4',birthday:'2000-10-20'},
{id:5,name:'name5',sex:'woman',description:'description5',birthday:'2000-10-20'},
{id:6,name:'name6',sex:'man',description:'description6',birthday:'2000-10-20'},
{id:7,name:'name7',sex:'woman',description:'description7',birthday:'2000-10-20'},
{id:8,name:'name8',sex:'man',description:'description8',birthday:'2000-10-20'},
{id:9,name:'name9',sex:'woman',description:'description9',birthday:'2000-10-20'}
]
};
Total:对应totalProperty，总共有多少条数据。
Root:对应root，就是返回的实际的数据。
3. 初始化时根据store.load()来获取希望的数据，代码：
store.load({
params:{
start:0,// 从0开始
limit:10// 查询10条记录
}
});
后台代码：
Integer start =Integer.parseInt(request.getParameter("start"));
Integer pageSize =Integer.parseInt(request.getParameter("limit"));
String json ="{total:100,root:[";
for (inti=start;i<start+pageSize;i++) {
json += "{id:" + i +",name:'name" + i + "',sex:'" + (i %2 ==0?"man":"woman") + "'}";
if (i != start + pageSize -1) {
json += ",";
}
}
json +="]}";
response.getWriter().write(json);
13.3分页工具条显示在表格顶部
这个很简单，将bbar改成tbar就可以了。
var grid =newExt.grid.GridPanel({
el: 'content',
ds: ds,
cm:cm,
autoHeight:true,
width:700,
title: 'Jsp Json',
tbar: newExt.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2}条',
emptyMsg: "没有记录"
})
});
效果：
同时在顶部和底部显示分页工具条，那就同时增加bbar和tbar就可以了。
13.4让Ext支持前台排序
前台排序是指一次性从后台把所有数据都读取到客户端，然后由客户端自动判断每次显示多少条数据。这样，分页时就补用再去后台读取数据了。这对于小数据量的分页是非常有利的。
虽然Ext并没有提供内存分页的功能，但是在Example/locale/目录中提供了一个PagingMemoryProxy扩展，它可以让我们从本地数组中读取数据，并进行分页。
（1），引入PagingMemoryProxy.js
<script type="text/javascript"src="../locale/PagingMemoryProxy.js">
</script>
（2），将MemoryProxy改为PagingMemoryProxy。
（3），用store.load({params:{start:0,limit:5}});加载前3条数据。
完整代码：
<linkrel="stylesheet"type="text/css"
href="../../resources/css/ext-all.css"/>
<scripttype="text/javascript"src="../../adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="../../ext-all.js"></script>
<scripttype="text/javascript"src="../locale/PagingMemoryProxy.js"></script>
<scripttype="text/javascript">
Ext.onReady(function() {
var sm =newExt.grid.CheckboxSelectionModel();
var cm =newExt.grid.ColumnModel([
newExt.grid.RowNumberer(),
sm,
{
header : '编号',
dataIndex : 'id',
width : 50
},
{
header : '名称',
dataIndex : 'name',
width : 100,
sortable : true
},
{
header : '生日',
dataIndex : 'birthday',
width : 100,
sortable : true,
/* renderer:new Ext.util.Format.dateRenderer('y-m-d') */
renderer : function(value) {
if (valueinstanceof Date) {
returnnew Date(value).format('y-m-d');
}
return value;
}
},
{
header : '性别',
dataIndex : 'sex',
sortable : true,
renderer : function(value) {
if (value =='man') {
return'<spanstyle="color:red;font-weight:bold">'
+ value + '</span>';
}
return'<spanstyle="color:green;font-weight:bold">'
+ value +'</span>';
}
}, {
id : 'descn',
header : '描述',
dataIndex : 'description',
width : 200
} ]);
var data = [ ['1', '啊','desc1', '2000-01-15', 'man' ],
[ '2', '得','desc2', '2010-01-15', 'woman' ],
[ '3', '歌','desc3', '2006-01-15', 'woman' ],
[ '4', '波','desc4', '2009-01-15', 'man' ],
[ '5', '此','desc5', '2002-01-15', 'woman' ],
[ '5', '此','desc5', '2002-01-15', 'woman' ],
[ '5', '此','desc5', '2002-01-15', 'woman' ],
[ '5', '此','desc5', '2002-01-15', 'woman' ],
[ '5', '此','desc5', '2002-01-15', 'woman' ],
[ '5', '此','desc5', '2002-01-15', 'woman' ],
[ '5', '此','desc5', '2002-01-15', 'woman' ]];
var store =newExt.data.Store({
proxy : newExt.data.PagingMemoryProxy(data),
reader : newExt.data.ArrayReader({}, [ {
name : 'id',
mapping : 0
}, {
name : 'name',
mapping : 1
}, {
name : 'sex',
mapping : 4
}, {
name : 'description',
mapping : 2
}, {
name : 'birthday',
mapping : 3
} ]),
sortInfo : {
field: 'name',
direction : 'ASC'
}
});
var grid1 =newExt.grid.GridPanel({
title : '员工信息',
renderTo : 'foregroundPagingGrid',
cm : cm,
store : store,
width : 700,
height : 120,
autoHeight : true,
enableColumnMove : false,
enableColumnResize : true,
loadMask : true,
viewConfig : {
forceFit : true,// 表格自动延伸每列的宽度，使之填满整个表格。
getRowClass : function(record, rowIndex, p, ds) {
if (rowIndex %2 == 0) {
return'oushu-row-color';
}
return'jishu-row-color';
},
columnsText : "显示的列",
scrollOffset : 30,//表格右侧为滚动条预留的宽度
sortAscText : "升序",
sortDescText : "降序"
},
autoExpandColumn : 'descn',
//sm:sm,
sm : newExt.grid.RowSelectionModel({
singleSelect : true
}),
bbar : newExt.PagingToolbar({
pageSize : 5, // 每页显示10条记录
displayInfo : true, // 显示提示信息
displayMsg : "显示第{0}条到第{1}条,共{2}条数据",
emptyMsg : "没有数据",
store : store
})
});
store.load({params:{start:0,limit:5}});
});
</script>
效果：
13.5后台排序
默认情况下，Grid只能对当前页数据进行排序，如果要对所有数据进行排序，则需要将排序信息提交给后台，由后台组装SQL，并将排序后的数据返回页面。
服务器排序，需要将Ext.data.Store的remoteSort设置为true，这个属性是指是否能够进行远程排序，默认为false。
var store =newExt.data.Store({
proxy:newExt.data.HttpProxy({
url:'../../../ext_paging.jsp'
}),
reader : newExt.data.JsonReader({
totalProperty:"total",
root:"root"
}, [ {
name : 'id',
mapping : 0
}, {
name : 'name',
mapping : 1
}, {
name : 'sex',
mapping : 4
}, {
name : 'description',
mapping : 2
}, {
name : 'birthday',
mapping : 3
} ]),
sortInfo : {
field : 'name',
direction : 'ASC'
},
remoteSort:true
});
将remoteSort设置为true后，下次排序时会传递2个参数给后台，dir和sort。
Sort：要排序的字段。
Dir:升序还是降序（ASC/DESC）。
后台处理的代码：
Integer start =Integer.parseInt(request.getParameter("start"));
Integer pageSize =Integer.parseInt(request.getParameter("limit"));
// 要排序的字段
String sort = request.getParameter("sort");
// 升序还是降序(ASC/DESC)
String dir = request.getParameter("dir");
if (dir ==null ||"".equals(dir)) {
dir = "ASC";
}
String json="{total:100,root:[";
if (dir.equals("ASC")) {
for (inti=start;i<start+pageSize;i++) {
json += "{id:" + i + ",name:'name" + i +"',sex:'" + (i %2 == 0?"man":"woman") +"'}";
if (i != start+ pageSize -1) {
json += ",";
}
}
}
else {// 降序排
for (inti=start+pageSize;i>start;i--) {
json += "{id:" + i + ",name:'name" + i +"',sex:'" + (i %2 == 0?"man":"woman") +"'}";
if (i != start-1) {
json += ",";
}
}
}
json += "]}";
response.getWriter().write(json);
如果用SQL来实现就更简单了。
‘select * fromt_user_info order by ‘ + sort + ‘ ‘ + dir;