Javascript 在Extjs 4.2中创建类似堆栈溢出工具栏的工具栏

我正在创建一个工具栏，就像堆栈溢出一样。请往下看，你们会看到分页。现在我正在堆栈之间，如何进一步处理。 我已经创建了4个按钮，分别是当前页面、下一页以及第二页和最后一页。 现在我想创建下一个按钮点击2页相同。当我点击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)
        };
    }
});

Ext.define（'Ext.bug.Newtoolbar'{
扩展：“Ext.toolbar.toolbar”，
alternateClassName:'NewToolbar'，
需要：['Ext.toolbar.TextItem'，'Ext.button']，
混合：{
可绑定：“Ext.util.bindable”
},
自动销毁：错误，
displayInfo:false，
displayMsg:'显示{2}中的{0}-{1}'，
emptyMsg:'没有要显示的数据'，
initComponent:函数（）{
var me=这个，
pagingItems=me.addBtn（），
userItems=me.items | | me.buttons | |[]；
如果（me.prependButtons）{
me.items=userItems.concat（分页项）；
}否则{
me.items=pagingItems.concat（userItems）；
}
//删除我的按钮；
如果（me.displayInfo）{
me.items.push（'->'）；
push（{xtype:'tbtext'，itemId:'displayItem'}）；
}
me.callParent（）；
me.addEvents（“变更”、“变更前”）；
me.on（'beforerender'，me.onLoad，me，{single:true}）；
me.bind（me.store | |'ext empty store'，true）；
},
//更新这里的信息。。。
updateInfo:函数（）{
var me=这个，
displayItem=me.child（'#displayItem'），
store=me.store，
pageData=me.getPageData（），
计数，味精；
如果（显示项）{
count=store.getCount（）；
如果（计数==0）{
msg=me.emptyMsg；
}否则{
msg=Ext.String.format(
我，
pageData.fromRecord，
pageData.toRecord，
pageData.total
);
}
displayItem.setText（msg）；
}
},
onLoad:function（）{
var me=这个，
页面数据，
柯尔佩奇，
页面计数，
后文，
计数
我是空的，
项目；
count=me.store.getCount（）；
isEmpty=计数===0；
如果（！isEmpty）{
pageData=me.getPageData（）；
currPage=pageData.currentPage；
pageCount=pageData.pageCount；
}否则{
currPage=0；
页面计数=0；
}
Ext.suspendLayouts（）；
me.updateInfo（）；
me.updateLayout（）；
Ext.resumeLayouts（真）；
如果（我被渲染）{
me.firevent（'change'，me，pageData）；
console.log（'asd'）；
};
},
addBtn:函数（）{
var OnloadArray=[]；
var me=这个，
页面数据，
当前页面，
页面计数；
PageData=me.getPageData（）；
currentPage=PageData.currentPage；
PageCount=PageData.PageCount；
对于（var temp=0；temp不用自己编码，何不利用Ext JS？
不用自己编码，何不利用Ext JS？
thanx ExtPro和lonrenz进行重播，因为我的经理想要那种工具栏。问题解决了。感谢大家重播Tanx ExtPro和lonrenz，因为我的经理想要重播工具条的类型。问题已解决。感谢大家的重播