extJS 4.2 自定义分页

Ext.define("Ext.ux.CustomSizePagingToolbar", {// 定义的名字要和文件的名字大小写一样
    extend : "Ext.toolbar.Paging",
    xtype:'customSizePagingToolbar',
    alias : "widget.custompaging",// 别名
    beforSizeText : "每页",
    afterSizeText : "条",
    getCustomItems : function() {
        var me = this;
        // 自定义customComStore
        var customComStore = Ext.create("Ext.data.JsonStore", {
            fields : [ "customPageSize" ],
            data : [ {
                customPageSize : "10"
            }, {
                customPageSize : "20"
            }, {
                customPageSize : "50"
            } ]
        })
        // 自定义customComboBox
        var customComboBox = Ext.create("Ext.form.field.ComboBox", {
            itemId : "customComboId",
            store : customComStore,
            queryMode : "local",
            displayField : "customPageSize",
            valueField : "customPageSize",
            enableKeyEvents : true,// 感应键盘事件
            width : 60,
            listeners : {
                scope : me,// 作用域
                select : me.onCustomSelect,
                keydown : me.onCustomKeyDown,
                blur : me.onCustomBlur
            }
        });
        // - 表示分割线,> 表示右边显示
        return [ "-", me.beforSizeText, customComboBox, me.afterSizeText ];
    },
    onCustomSelect : function(combo, records, eOpts) {// 选择事件触发
        var me = this;
        me.store.pageSize = records[0].data.customPageSize;
        me.store.loadPage(1);// 默认加载第一页
    },
    onCustomKeyDown : function(field, e, eOpts) {// 按键事件触发
        var me = this;
        var k = e.getKey();
        if (k == e.ENTER) {
            e.stopEvent();// 停止其他事件
            me.store.pageSize = me.child("#customComboId").getValue();
            me.store.loadPage(1);
        }
    },
    onCustomBlur : function(combo, the, eOpts) {// 失去焦点事件
        var me = this;
        me.child("#customComboId").setValue(me.store.pageSize);
    },
    // 初始化界面组件
    initComponent : function() {
        var me = this;
        Ext.apply(me, {// 应用、附加
            items : me.getCustomItems()
        });
        me.callParent(arguments);
        me.child("#customComboId").setValue(me.store.pageSize);// 初始化赋值
    }
})

引用：

bbar: {
    xtype:'customSizePagingToolbar',
    store: store,
    displayInfo: true,
    displayMsg: '显示{0}-{1}条，共{2}条',
    emptyMsg: "没有数据"
},