需要插件ext-ui-combo-pagesize.js ， 参考自：badwps

ext-ui-combo-pagesize.js

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: [5, 10, 15, 20, 25, 30, 50, 75, 100, 200, 300, 500],
    prefixText: 'Showing ',
    postfixText: 'records per page.',
    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: 45,
            store: ps,
            enableKeyEvents: true,
            editable: true,
            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

// 分页栏
  var bbar = new Ext.PagingToolbar(
      {
          plugins: [ new Ext.ui.plugins.ComboPageSize({pageSizes:[20,50,100], addToItem: true, prefixText: '每页', postfixText: '条'})],
          pageSize: 20,
          store: store,
          displayInfo: true,
          displayMsg: '当前显示 {0} - {1} 条，共 {2} 条',
          emptyMsg: "对不起,没有找到数据"

      }
  );

grid

 var gird = new Ext.grid.GridPanel({
        ....
        bbar:bbar,
        store: store,
        mode: 'remote'
    });

效果