在 Extjs 4.2 中创建工具栏，应该像 Stack Overflow 工具栏

Question

我正在创建类似于 Stack Overflow 的工具栏，有 Like This Am Creating 请往下看，你会看到 Pagination。现在我的堆栈位于如何处理 futhure 之间。 我创建了 4 个按钮，它们是当前页、下一页、第二页和最后一页。 现在我想在单击 2 页时创建下一个按钮。当我点击 2 页（即第二个按钮 然后我想创建 3,4, 按钮.. 如果我点击 6 比我想创建下两个按钮和上一个按钮将看到上面链接中看到的相同方式。

我的代码在这里：

Ext.define('Ext.bug.Newtoolbar', {
    extend: 'Ext.toolbar.Toolbar',
    alternateClassName: 'NewToolbar',
    requires: ['Ext.toolbar.TextItem', 'Ext.button'],
    mixins: {
        bindable: 'Ext.util.Bindable'
    },
    autoDestroy: false,

    displayInfo: false,

    displayMsg: 'Displaying {0} - {1} of {2}',

    emptyMsg: 'No data to display',

    initComponent: function () {
        var me = this,
        pagingItems = me.addBtn(),
        userItems = me.items || me.buttons || [];
        if (me.prependButtons) {
            me.items = userItems.concat(pagingItems);
        } else {
            me.items = pagingItems.concat(userItems);
        }
        //delete me.buttons;

        if (me.displayInfo) {

            me.items.push('->');
            me.items.push({ xtype: 'tbtext', itemId: 'displayItem' });
        }

        me.callParent();

        me.addEvents('change', 'beforechange');

        me.on('beforerender', me.onLoad, me, { single: true });

        me.bind(me.store || 'ext-empty-store', true);

    },
    // update here info...
    updateInfo: function () {
        var me = this,
            displayItem = me.child('#displayItem'),
            store = me.store,
            pageData = me.getPageData(),
            count, msg;

        if (displayItem) {
            count = store.getCount();
            if (count === 0) {
                msg = me.emptyMsg;
            } else {
                msg = Ext.String.format(
                    me.displayMsg,
                    pageData.fromRecord,
                    pageData.toRecord,
                    pageData.total
                );
            }
            displayItem.setText(msg);
        }
    },

    onLoad: function () {
        var me = this,
            pageData,
            currPage,
            pageCount,
            afterText,
            count,
            isEmpty,
            item;
        count = me.store.getCount();
        isEmpty = count === 0;
        if (!isEmpty) {
            pageData = me.getPageData();
            currPage = pageData.currentPage;
            pageCount = pageData.pageCount;
        } else {
            currPage = 0;
            pageCount = 0;
        }
        Ext.suspendLayouts();

       me.updateInfo();

        me.updateLayout();

        Ext.resumeLayouts(true);


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

     addBtn: function () {
        var OnloadArray = [];
        var me = this,
                 PageData,
                 currntPage,
                 PageCount;
        PageData = me.getPageData();
        currntPage = PageData.currentPage;
        PageCount = PageData.pageCount;

        for (var temp = 0; temp <= currntPage + 1; temp++) {
            if (temp != 0) {
                OnloadArray.push({
                    xtype: 'button',
                    itemId: temp,
                    scope: me,
                    text: temp,
                    enableToggle: true,
                    toggleGroup: me,
                    handler: me.btnHandler
                });
            }
        };
        OnloadArray.push({
            xtype: 'tbtext',
            scope: me,
            text: '..........',
            itemId: currntPage + 2
        });
        OnloadArray.push({
            xtype: 'button',
            itemId: PageCount - 1,
            scope: me,
            text: PageCount - 1,
            enableToggle: true,
            toggleGroup: me,
            handler: me.btnHandler
        });
        OnloadArray.push({
            xtype: 'button',
            itemId: PageCount,
            scope: me,
            text: PageCount,
            enableToggle: true,
            toggleGroup: me,
            handler: me.btnHandler
        });
        return OnloadArray;
    },

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

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

请帮帮我

谢谢

Answer 1

与其自己编写代码，不如利用 Ext JS 的 existing functionality？