extjs 4 grid自定义分页页码

折腾好久...................代码

定义数据源

  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"οnchange="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();
}