創建工具欄在Extjs 4.2應該喜歡堆棧溢出工具欄

Question

正在創建工具欄這就像堆棧溢出Like This Am Creating請往下看，你會看到分頁。現在是堆棧之間如何處理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

？