Creating Toolbar In Extjs 4.2 which should like Stack Overflow Toolbar

Question

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 futhure . 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.

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

please Help me Please

Thank You

Answer 1

Instead of coding it yourself, why not leverage off Ext JS's existing functionality?