將選項卡添加到ExtJS中的現有工具欄

Question

我有一個現有的工具欄，想向其添加選項卡，以便在使用卡布局的兩個面板之間切換。 我最好的選擇是什么，是否有這樣做的例子？

• 是否可以將選項卡添加到我現有的工具欄中？ 更改現有按鈕上的xtype並沒有為我提供我希望看到的選項卡。
• 創建一個包含我的兩張卡片的標簽面板，將每個標簽映射到其面板。 使用此選項，可以向選項卡面板添加其他按鈕和菜單嗎？

這是我現有工具欄代碼的示例，message_button和attachments_button能否僅具有選項卡的xtype，然后以某種方式模擬選項卡的功能？

Ext.define('MyArchive.Toolbar', {                                                                                                                                                 
  alias: 'myarchive.toolbar',                                                                                                                                                     
  extend: 'Ext.toolbar.Toolbar',                                                                                                                                                  
  dock: 'top',                                                                                                                                                                    
  width: '100%',                                                                                                                                                                  
  items: [
    // Pretty straight forward buttons with a listener, nothing fancy
    messages_button,                                                                                                                                                                  
    attachments_button,                                                                                                                                         
    '->',                                                                                                                                                                         
    { xtype: 'button', id: 'forward-button', text: 'Forward' },                                                                                                                    
    '-',                                                                                                                                                                          
    { xtype: 'button', id: 'recover-button', text: 'Recover' },                                                                                                                    
    '-',                                                                                                                                                                          
   {                                                                                                                                                                              
     text: 'Download',                                                                                                                                                            
     menu: {                                                                                                                                                                      
       xtype: 'menu',                                                                                                                                                             
       id: 'download-menu',                                                                                                                                                       
       items: [                                                                                                                                                                   
         {xtype: 'menuitem', id: 'download-original', text: 'Original', iconCls: 'download-icon'},                                                                                
         {xtype: 'menuitem', id: 'download-pdf', text: 'PDF', iconCls: 'pdf-icon'}                                                                                                
       ]                                                                                                                                                                          
     }                                                                                                                                                                            
   }                                                                                                                                                                              
  ]

Answer 1

是否可以將選項卡添加到我現有的工具欄中？ 更改現有按鈕上的xtype並沒有為我提供我希望看到的選項卡。

我已經試過了 但是沒有運氣。

創建一個包含我的兩張卡片的標簽面板，將每個標簽映射到其面板。 使用此選項，可以向選項卡面板添加其他按鈕和菜單嗎？

有可能的。 但是結果看起來很難看（您可以使用CSS裝飾它）。
使用tabpanel.tabBar.add()添加按鈕和菜單（ 此處為demo ）：

tabpanel.tabBar.add({
    xtype: 'button',
    text: 'hallo, I\'m a button'
});
tabpanel.tabBar.add({
    xtype: 'splitbutton',
    text: 'Download',
    menu: {
        xtype: 'menu',
        id: 'download-menu',
        // ans so on ...