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;
                    }
                }
            });

然後就可以愉快的體驗了自定義分頁了！！！
在具體操作的時候可以根據自己的需求，調整順序；以上代碼親測可用。