Extjs3 PagingToolbar下拉框分页插件

Extjs PagingToolbar下拉框分页插件

Ext.namespace('Ext.ui.plugins');
 
 Ext.ui.plugins.ComboPageSize = function(config) {
     Ext.apply(this, config);
 };
 
 Ext.extend(Ext.ui.plugins.ComboPageSize, Ext.util.Observable, {
 
     pageSizes: [25, 50, 100, 200, 500],
     prefixText: '每页显示',
     postfixText: '条',
     addToItem: true,    //true添加到items中去，配合index；false则直接添加到最后
     index: 10,           //在items中的位置
     init: function(pagingToolbar) {
         var ps = this.pageSizes;
         var combo = new Ext.form.ComboBox({
             typeAhead: true,
             triggerAction: 'all',
             lazyRender: true,
             mode: 'local',
             width: 80,
             store: ps,
             enableKeyEvents: true,
             editable: false,
             loadPages: function() {
                 var rowIndex = 0;
                 var gp = pagingToolbar.findParentBy(
                                 function(ct, cmp) { return (ct instanceof Ext.grid.GridPanel) ? true : false; }
                               );
                 var sm = gp.getSelectionModel();
                 if (undefined != sm && sm.hasSelection()) {
                     if (sm instanceof Ext.grid.RowSelectionModel) {
                         rowIndex = gp.store.indexOf(sm.getSelected());
                     } else if (sm instanceof Ext.grid.CellSelectionModel) {
                         rowIndex = sm.getSelectedCell()[0];
                     }
                 }
                 rowIndex += pagingToolbar.cursor;
                 pagingToolbar.doLoad(Math.floor(rowIndex / pagingToolbar.pageSize) * pagingToolbar.pageSize);
             },
             listeners: {
                 select: function(c, r, i) {
                     pagingToolbar.pageSize = ps[i];
                     this.loadPages();
                 },
                 blur: function() {
                     var pagesizeTemp = Number(this.getValue());
                     if (isNaN(pagesizeTemp)) {
                         this.setValue(pagingToolbar.pageSize);
                         return;
                     }
                     pagingToolbar.pageSize = Number(this.getValue());
                     this.loadPages();
                 }
             }
         });
         if (this.addToItem) {
             var inputIndex = this.index;
             if (inputIndex > pagingToolbar.items.length) inputIndex = pagingToolbar.items.length;
             pagingToolbar.insert(++inputIndex, '-');
             pagingToolbar.insert(++inputIndex, this.prefixText);
             pagingToolbar.insert(++inputIndex, combo);
             pagingToolbar.insert(++inputIndex, this.postfixText);
         }
         else {
             pagingToolbar.add('-');
             pagingToolbar.add(this.prefixText);
             pagingToolbar.add(combo);
             pagingToolbar.add(this.postfixText);
         }
         pagingToolbar.on({
             beforedestroy: function() {
                 combo.destroy();
             },
             change: function() {
                 combo.setValue(pagingToolbar.pageSize);
 
             }
         });
 
     }
 })

使用方法

bbar: new Ext.PagingToolbar({
                    plugins: new Ext.ui.plugins.ComboPageSize(),
                    pageSize: myPageSize,
                    displayInfo : true,
                    displayMsg : '当前记录数: {0} - {1} 总记录数: {2}',   
                    emptyMsg : '没有符合条件的记录',   
                    store : config.store
                })

来源：Ext.PagingToolbar设置每页显示条数插件
作者还有个滑动条改变分页的，赞，链接过去看吧。