在Extjs 4.2中创建工具栏，它应该像Stack Overflow Toolbar一样

Question

正在创建工具栏，就像Stack Overflow Like This Am Creating请走下去，你会看到Pagination.Now Am堆叠在如何处理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？

，而不是自己编码