Ext4.0.7分页工具自定义分页条数

先给出效果： 第一步：先定义store 本人一般都是直接从api或者网上cv操作的

noSetMeterStore = Ext.create(Ext.data.Store,{
                  model : noSetModel,//model根据自己需求定义model
                  pageSize : itemsPerPage,//分页条数，这里的值是跟分页工具右下方显示的“显示n-m条/共x条”有关系
                  proxy : {
                      type : ajax,            
                      actionMethods: {  
                          read: POST  
                      }, 
                      url : getNoSetMeterUrl,
                      reader : {
                        type : json,
                        root : noSetParaList,
                        successProperty: success,
                        totalProperty : count
                      }
                  }
              });
              noSetMeterStore.load({
                params : {
                    start : start,
                    limit : itemsPerPage//分页条数
                }
            });

第二步：定义一个combobox，以便于在分页工具中添加

var combo = Ext.create(Ext.form.ComboBox, {
                name : pagesize,
                hiddenName : pagesize,
                store : new Ext.data.ArrayStore({
                    fields : [ text, value ],
                    data : [ [ 20, 20 ], [ 40, 40 ], [ 60, 60 ],
                            [ 80, 80 ], [ 100, 100 ] , [ 200, 200 ]]
                }),
                valueField : value,
                displayField : text,
                emptyText : 20,
                width : 50
            });

第三步：给combobox加上change事件

combo.on("select", function(comboBox) {
          
   
                var pagingBar = Ext.getCmp(pagingbar);//获取分页工具组件
                pagingBar.pageSize = parseInt(comboBox.getValue());//修改分页工具组件的pagingsize
                itemsPerPage = parseInt(comboBox.getValue());给分页条数赋值，这里你可以定义一个全局的分页条数，每次在这里更改他的值
                noSetMeterStore.limit = itemsPerPage;//将store里面的limit值也改掉
                noSetMeterStore.pageSize = itemsPerPage;//同理改掉store里面的pagesize值。这个很重要！！！！
                noSetMeterStore.loadPage(1);//不管是在哪个页面，都让store去显示第一个页面，加载第一个页面的数据
            })

第四步：定义一个分页工具，将下拉框给添加进去

var pagingBar = Ext.create(Ext.toolbar.Paging, {
                store : noSetMeterStore,
                id : pagingbar,
                dock : bottom,
                pageSize : itemsPerPage,//这里要将全局的变量写进去
                displayInfo : true,
                displayMsg : <s:text name="hint.page.info"/>,// 显示0-1条，共2条 
                emptyMsg : <s:text name="hint.noData" />, // 没有数据 
                items : [ -, 每页显示, combo, 条 ],//在这里将下拉框加进去，其他的没什么特别的
                listeners : {
                    change : function(paging, pageData) {
          
   
                        start = (pageData.currentPage - 1) * itemsPerPage;
                        total = pageData.total;
                    }
                }
            });

然后就可以愉快的体验了自定义分页了！！！ 在具体操作的时候可以根据自己的需求，调整顺序；以上代码亲测可用。