Adding tabs to an existing toolbar in ExtJS

I have an existing toolbar and would like to add tabs to it that would flip between two panels that use a card layout. What would be my best option and are there any examples of doing so?

• Is it possible to add the tabs to my existing toolbar? Changing the xtype on my existing buttons didn't provide me with the tabs I was hoping to see.
• Create a tab panel which would contain my two cards, mapping each tab to its panel. With this option, can I add additional buttons and menus to the tab panel?

Here's a sample of my existing toolbar code, can message_button and attachments_button simply have an xtype of tab and then somehow emulate the tab functionality?

Ext.define('MyArchive.Toolbar', {                                                                                                                                                 
  alias: 'myarchive.toolbar',                                                                                                                                                     
  ex开发者_如何学Ctend: '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'}                                                                                                
       ]                                                                                                                                                                          
     }                                                                                                                                                                            
   }                                                                                                                                                                              
  ]

Is it possible to add the tabs to my existing toolbar? Changing the xtype on my existing buttons didn't provide me with the tabs I was hoping to see.

I've tried it. But no luck.

Create a tab panel which would contain my two cards, mapping each tab to its panel. With this option, can I add additional buttons and menus to the tab panel?

It is possible. But result looks ugly (you can decorate it with CSS).
Use tabpanel.tabBar.add() to add buttons and menus (Here is 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 ...