Creating Toolbar In Extjs 4.2 which should like Stack Overflow Toolbar

See more:

Javascript

ExtJS

Am Creating Toolbar Which Is like Stack Overflow having Like This Am Creating Please Go Down you will see Pagination.Now Am stack in between how processed. i have created 4 buttons which are current page, its next page, and second and last page. now i want to create next button on click of 2 page same. when i click on 2 page(ie 2nd button then i want to create 3,4, button.. same way if i click on 6 than i wan to create next two button and prev button will seen which seen in above link.

this Is LInk, of this type i want to create
[]

my code is here:

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)
    };
}
});