uas-platform/frontend/uas-web/overrides/toolbar/Paging.js

Ext.define('uas.override.toolbar.Paging', {
    override: 'Ext.toolbar.Paging',

    // 行信息
    selectionText: 'selected {0} rows / total {1} rows',
    // 可选分页大小
    pageSizeList: [10, 20, 50, 100, 200, 500, 1000, 3000, 10000],
    sizeText: 'display per page',
    sizeItemWidth: 100,
    defaultPageSize: 20,

    getPagingItems: function() {
        var me = this,
            inputListeners = {
                scope: me,
                blur: me.onPagingBlur
            };
        inputListeners[Ext.supports.SpecialKeyDownRepeat ? 'keydown' : 'keypress'] = me.onPagingKeyDown,
        pageSizeListeners = {
            scope: me,
            blur: me.onPageSizeChange,
            select: me.onPageSizeChange,
            specialkey: me.onPageSizeKey
        };
        
        var pageSizeStore = {
            fields: ['display', 'value'],
            data: me.pageSizeList.map(function(i){
                return {
                    display: String(i),
                    value: i
                }
            })
        };
        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,
                margin: '-1 2 3 2',
                listeners: inputListeners
            },
            {
                xtype: 'tbtext',
                itemId: 'afterTextItem',
                html: 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: 'selectionTextItem',
                html: Ext.String.format(me.selectionText, 0, 0)
            },
            '-',
            me.sizeText,
            {
                xtype: 'combobox',
                itemId: 'sizeItem',
                name: 'sizeItem',
                cls: Ext.baseCSSPrefix + 'tbar-page-size',
                value: me.defaultPageSize,
                store: pageSizeStore,
                displayField: 'display',
                valueField: 'value',
                enableKeyEvents: true,
                keyNavEnabled: false,
                submitValue: false,
                isFormField: false,
                width: me.sizeItemWidth,
                margin: '-1 2 3 2',
                listeners: pageSizeListeners
            },
            {
                itemId: 'refresh',
                tooltip: me.refreshText,
                overflowText: me.refreshText,
                iconCls: Ext.baseCSSPrefix + 'tbar-loading',
                disabled: me.store.isLoading(),
                handler: me.doRefresh,
                scope: me
            }
        ];
    },
    /**
     * @private
     */
    onLoad: function() {
        var me = this,
            pageData, currPage, pageCount, afterText, selectionText, selectedCount, count, isEmpty, item;
        count = me.store.getCount();
        isEmpty = count === 0;
        if (!isEmpty) {
            pageData = me.getPageData();
            currPage = pageData.currentPage;
            pageCount = pageData.pageCount;
            // Check for invalid current page.
            if (currPage > pageCount) {
                // If the surrent page is beyond the loaded end,
                // jump back to the loaded end if there is a valid page count.
                if (pageCount > 0) {
                    me.store.loadPage(pageCount);
                } else // If no pages, reset the page field.
                {
                    me.getInputItem().reset();
                }
                return;
            }
            afterText = Ext.String.format(me.afterPageText, isNaN(pageCount) ? 1 : pageCount);
        } else {
            currPage = 0;
            pageCount = 0;
            afterText = Ext.String.format(me.afterPageText, 0);
        }
        Ext.suspendLayouts();
        item = me.child('#afterTextItem');
        if (item) {
            item.update(afterText);
        }
        item = me.getInputItem();
        if (item) {
            item.setDisabled(isEmpty).setValue(currPage);
        }
        item = me.child('#selectionTextItem');
        if (item) {
            selectedCount = me.ownerCt.getSelectionModel().getSelected().length;
            selectionText = Ext.String.format(me.selectionText, selectedCount, count);
            item.update(selectionText);
        }
        me.setChildDisabled('#first', currPage === 1 || isEmpty);
        me.setChildDisabled('#prev', currPage === 1 || isEmpty);
        me.setChildDisabled('#next', currPage === pageCount || isEmpty);
        me.setChildDisabled('#last', currPage === pageCount || isEmpty);
        me.setChildDisabled('#refresh', false);
        me.updateInfo();
        Ext.resumeLayouts(true);
        if (!me.calledInternal) {
            me.fireEvent('change', me, pageData || me.emptyPageData);
        }
    },

    getStoreListeners: function() {
        return {
            beforeload: this.beforeLoad,
            load: this.onLoad,
            refresh: this.onLoad,
            exception: this.onLoadError
        };
    },

    afterRender: function() {
        var me = this;
        me.callParent();
        me.ownerCt.on('selectionchange', me.onSelectionChange, me);
    },

    onSelectionChange: function(selModel, selected) {
        var me = this, 
            count = me.store.getCount(),
            selectedCount = selected.length,
            selectionText;
        var item = me.child('#selectionTextItem');
        if (item) {
            selectionText = Ext.String.format(me.selectionText, selectedCount, count);
            item.update(selectionText);
        }
    },

    onPageSizeChange: function(field) {
        var me = this,
            pageSize = field.getValue(),
            oldValue = me.store.pageSize || me.defaultPageSize;
        if (!pageSize) {
            field.setValue(pageSize);
        } else if (pageSize != oldValue) {
            me.store.pageSize = pageSize;
            me.moveFirst();
        }
    },

    onPageSizeKey: function(field, e) {
        if (e.getKey() == e.ENTER) {
            this.onPageSizeChange(field);
        }
    },

    moveFirst: function() {
        this.loadPage(1);
    },

    movePrevious: function() {
        var me = this,
            store = me.store,
            prev = store.currentPage - 1;
        if (prev > 0) {
            me.loadPage(prev);
        }
    },

    moveNext: function() {
        var me = this,
            store = me.store,
            total = me.getPageData().pageCount,
            next = store.currentPage + 1;
        if (next <= total) {
            me.loadPage(next);
        }
    },

    moveLast: function() {
        var me = this,
            last = me.getPageData().pageCount;
        me.loadPage(last);
    },

    doRefresh: function() {
        var me = this,
            store = me.store,
            current = store.currentPage;
        me.loadPage(current);
    },

    loadPage: function(page) {
        var me = this, grid = me.ownerCt, store = me.store;
        grid.fireEvent('paging', grid, {
            currentPage: page,
            pageSize: store.pageSize
        });
    }
});