ExtJS分页工具栏，可以选择每页的项目数

Question

我正在使用ExtJS 4.2 Ext.toolbar.Paging，我希望能够在页面上选择项目数，即设置商店的pageSize。

我的解决方案是扩展现有的Ext.toolbar.Paging，但也许有更简单的解决方案？或者我的解决方案可以改进吗？

解决方案：

Ext.require([
    'Ext.toolbar.Paging'
]);

Ext.define('Ext.lib.extensions.PortalPagingToolbar', {
    extend: 'Ext.toolbar.Paging',
    alias: 'widget.portalPagingToolbar',
    alternateClassName: 'Portal.PagingToolbar',

    /**
     * Objects per page default
     */
    objectsPerPageDefault: 25,

    /**
     * Objects per page text
     */
    objectsPerPageText: 'Objects per page:',

    /**
     * Gets the paging items in the toolbar
     * @private
     */
    getPagingItems: function () {
        var me = this;

        return [
            {
                itemId: 'first',
                tooltip: me.firstText,
                overflowText: me.firstText,
                iconCls: Ext.baseCSSPrefix + 'tbar-page-first',
                disabled: true,
                handler: me.moveFirst,
                scope: me
            },
            {
                itemId: 'prev',
                tooltip: me.prevText,
                overflowText: me.prevText,
                iconCls: Ext.baseCSSPrefix + 'tbar-page-prev',
                disabled: true,
                handler: me.movePrevious,
                scope: me
            },
            '-',
            me.beforePageText,
            {
                xtype: 'numberfield',
                itemId: 'inputItem',
                name: 'inputItem',
                cls: Ext.baseCSSPrefix + 'tbar-page-number',
                allowDecimals: false,
                minValue: 1,
                hideTrigger: true,
                enableKeyEvents: true,
                keyNavEnabled: false,
                selectOnFocus: true,
                submitValue: false,
                // mark it as not a field so the form will not catch it when    getting fields
                isFormField: false,
                width: me.inputItemWidth,
                listeners: {
                    scope: me,
                    keydown: me.onPagingKeyDown,
                    blur: me.onPagingBlur
                }
            },
            {
                xtype: 'tbtext',
                itemId: 'afterTextItem',
                text: Ext.String.format(me.afterPageText, 1)
            },
            '-',
            {
                itemId: 'next',
                tooltip: me.nextText,
                overflowText: me.nextText,
                iconCls: Ext.baseCSSPrefix + 'tbar-page-next',
                disabled: true,
                handler: me.moveNext,
                scope: me
            },
            {
                itemId: 'last',
                tooltip: me.lastText,
                overflowText: me.lastText,
                iconCls: Ext.baseCSSPrefix + 'tbar-page-last',
                disabled: true,
                handler: me.moveLast,
                scope: me
            },
            '-',
            {
                xtype: 'tbtext',
                itemId: 'objectsPerPageText',
                text: Ext.String.format(me.objectsPerPageText, 1)
            },
            {
                xtype: 'combo',
                isFormField: false,
                itemId: 'comboItemsCount',
                name: 'comboItemsCount',
                store: [
                    ['10', '10'],
                    ['25', '25'],
                    ['50', '50'],
                    ['100', '100'],
                    ['250', '250'],
                    ['500', '500'],
                    ['1000', '1000']
                ],
                width: 75,
                listeners: {
                    scope: me,
                    change: me.onItemsPerPageChange
                }
            },
            '-',
            {
                itemId: 'refresh',
                tooltip: me.refreshText,
                overflowText: me.refreshText,
                iconCls: Ext.baseCSSPrefix + 'tbar-loading',
                handler: me.doRefresh,
                scope: me
            }
        ];
    },

    // @private
    onLoad: function () {
        var me = this,
            pageData,
            pageSize,
            currPage,
            pageCount,
            afterText,
            count,
            isEmpty;

        count = me.store.getCount();
        isEmpty = count === 0;
        if (!isEmpty) {
            pageData = me.getPageData();
            pageSize = pageData.pageSize ? pageData.pageSize : me.objectsPerPageDefault;
            currPage = pageData.currentPage;
            pageCount = pageData.pageCount;
            afterText = Ext.String.format(me.afterPageText, isNaN(pageCount) ? 1 : pageCount);
        } else {
            pageData = me.objectsPerPageDefault;
            currPage = 0;
            pageCount = 0;
            afterText = Ext.String.format(me.afterPageText, 0);
        }

        Ext.suspendLayouts();
        me.child('#afterTextItem').setText(afterText);
        me.child('#inputItem').setDisabled(isEmpty).setValue(currPage);
        me.child('#first').setDisabled(currPage === 1 || isEmpty);
        me.child('#prev').setDisabled(currPage === 1 || isEmpty);
        me.child('#next').setDisabled(currPage === pageCount || isEmpty);
        me.child('#last').setDisabled(currPage === pageCount || isEmpty);
        me.child('#comboItemsCount').setDisabled(isEmpty).setValue(pageSize);
        me.child('#refresh').enable();
        me.updateInfo();
        Ext.resumeLayouts(true);

        if (me.rendered) {
            me.fireEvent('change', me, pageData);
        }
    },

    // @private
    getPageData: function () {
        var store = this.store,
            totalCount = store.getTotalCount();

        return {
            total: totalCount,
            pageSize: store.pageSize,
            currentPage: store.currentPage,
            pageCount: Math.ceil(totalCount / store.pageSize),
            fromRecord: ((store.currentPage - 1) * store.pageSize) + 1,
            toRecord: Math.min(store.currentPage * store.pageSize, totalCount)

        };
    },

    //@private
    onItemsPerPageChange: function (combo, newValue) {
        var me = this;

        if(newValue) {
            me.store.pageSize = newValue;
            me.store.loadPage(1);
        }
    }
});