折腾好久...................代码
定义数据源
var userStore = Ext.create('Ext.data.Store',{
autoLoad : true,
//
remoteSort:true, //设置后台排序 设置后客户端排序失灵
async : false,
fields : [{
name : 'id'
},{
name : 'userName'
}],
proxy : {
type : 'ajax',
url : 'selectUserInfo.action',
reader : {
type : 'json',
root : 'rows'
}
}
/** *************人员管理列表***************** */
var userGrid = Ext.create('Ext.grid.Panel',{
id : 'userPanel',
store : userStore,
border : false,
height : document.body.scrollHeight - 70,
columns : [{
header : '人员id',
sortable : true,
dataIndex : 'id',
flex : 1
},{
header : '用户名',
sortable : true,
dataIndex : 'userName',
flex : 1
},{
header : '日期',
sortable : true,
dataIndex : 'createTime',
flex : 1,
renderer :function(value){
return Ext.util.Format.date(value, 'Y-m-d H:m:s'); // 自定义日期格式
}
},{
header : '账号状态',
sortable : true,
dataIndex : 'state',
flex : 1,
renderer : function(value){
return value=='1'?'正常':value=='2'?'禁用':'';
}
}],
bbar : Ext.create('Ext.PagingToolbar', {
pageSize : 6,
store : userStore,
displayInfo : true,
plugins : Ext.create('Ext.ux.ProgressBarPager', {}),
items : ['-', {
html : '<select name=sel id="sel"onchange="action(this.value)"style="width:40px;
height:25px">'
+ '<option value="20">20</option>' +
'<option value="30">30</option>'
+ '<option value="40">40</option>'
+ '<option value="50">50</option></select>'
}]
}),
tbar : [{
text : '添加',
scope : this,
handler :
},{
text : '编辑',
scope : this,
itemId : 'edit',
disabled : true,
},{
text : '禁用',
itemId : 'disable',
disabled : true,
scope : this
}],
listeners : {
'itemdbclick' : function(grid, rowindex, e) {
}
},
selModel : Ext.create('Ext.selection.CheckboxModel', {
listeners : {
selectionchange : function(sm, selections) {
userGrid.down('#edit').setDisabled(selections.length == 0);
},
scope : this
}
})
});
在最后定义一个方法 用于触发选择显示条数
function action(value){
userStore.pageSize = value;
userStore.load();
}