前台JS：
var cm = new Ext.grid.ColumnModel( [ new Ext.grid.RowNumberer(),// 自动行号
// sm,// 添加的地方
{
header : '编号',
dataIndex : 'userid',
id : 'userid',
sortable : true
}, {
header : '注册名',
dataIndex : 'userno',
id : 'userno',
sortable : true
}, {
header : '用户名',
dataIndex : 'username',
id : 'username',
sortable : true
}, {
header : '用户角色',
dataIndex : 'rolename',
id : 'rolename',
sortable : true
}, {
header : '性别',
dataIndex : 'sex',
id : 'sex',
sortable : true,
renderer : changeSex
}, {
header : '电话',
dataIndex : 'phone',
id : 'phone',
sortable : true
}, {
header : 'Email邮箱',
dataIndex : 'email',
id : 'email',
sortable : true
}, {
header : '地址',
dataIndex : 'address',
id : 'address',
sortable : true
} ]);
// 请注意defaultSortable属性，即为每个列都安上一个可以排序的功能。
cm.defaultSortable = true;
// 改变数据中的颜色
function changeSex(value) {
if (value == '0') {
return "<span style='color:red;font-weight:bold;'>男</span>";
} else {
return "<span style='color:green;font-weight:bold;'>女</span>";
}
}
//对这样的JSON用Ext.data.JsonStore
var ds = new Ext.data.JsonStore( {
proxy : new Ext.data.HttpProxy( {
url : _contextPath_ + "/role/consumerAction_getquery.action?consumer.grade=3"
}),
totalProperty:'totalCount',
root:'data',
fields: ['userid','username','rolename','sex','phone','phone','email','address'],
remoteSort : true
});
// 对数据进行初始化。
ds.load({params:{start:0,limit:5}});
var bbar = new Ext.PagingToolbar( {
pageSize : 5, // 每页显示的记录数，默认是20。
store : ds, // 这个和grid里边的store参数是一样的，因为分页也需要和数据打交道，所以需要这个参数。
displayInfo : true, // 是否显示displayMsg，默认是不显示
displayMsg : '显示第 {0} 条到 {1} 条记录，共 {2} 条', // 显示的分页状态信息，
emptyMsg : "没有符合条件的记录" // 没有记录时显示的文本。
});
在Grid中加入bbar:bbar ,即可看到分页栏
主要的由红色标注！！
后台参考：
http://www.360doc.com/content/11/0705/19/2617151_131681623.shtml