Добавление вкладок на существующую панель инструментов в ExtJS

Question

У меня есть существующая панель инструментов, и я хотел бы добавить к ней вкладки, которые будут переключаться между двумя панелями, которые используют макет карты. Какой будет мой лучший вариант, и есть ли примеры такого решения?

• Можно ли добавить вкладки на мою существующую панель инструментов? Изменение xtype на моих существующих кнопках не давало мне вкладки, которые я надеялся увидеть.
• Создайте панель вкладок, которая будет содержать две мои карты, сопоставляя каждую вкладку с ее панелью. С помощью этой опции я могу добавить дополнительные кнопки и меню на панель вкладок?

Вот пример моего существующего кода панели инструментов, могут ли message_button и attachments_button просто иметь xtype tab и затем каким-то образом эмулировать функциональность tab?

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() для добавления кнопок и меню ( Вот демо ):

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