Buttons linking to new panels in Sencha Touch

pardon my naivety here. I'm trying to make buttons on a ToolBar link to a new card as opposed to TabPanels. The new card will have different panel elements than the home I've watched all the video tuts and read several articles on here, yet somehow never quite manage to get it sorted.

new Ext.Application({
        name: 'Demo App',
        launch: function() {
        this.viewport = new Ext.TabPanel({
           fullscreen: true,
           id: 'mainPanel',
           html: 'Welcome',
           cls: 'homescreen',
           dockedItems: [{
              xtype: 'toolbar',
              ui: 'light',
              title: 'Home',
              items: [
                 {text: 'Option1', ui: 'action',  flex: 1},
                 {xtype: 'spacer', },
                 {text: 'Option2', ui: 'action',flex: 1 }
              ]
          开发者_高级运维 }]
        }); 
    }
});

That's not really the point of a tab panel. It's supposed to load cards into the main panel and let you move between them. You could load a new fullscreen panel (which could have it's own tab panel or other elements) by intercepting the card switch and rendering your new separate panel like so:

new Ext.Application({
    name: 'Demo App',
    launch: function() {
        this.viewport = new Ext.TabPanel({
            fullscreen: true,
            id: 'mainPanel',
            cls: 'homescreen',
            items: [{
                title   : 'Home',
                html    : 'Welcome'
            },{
                title   : 'Full screen'
            }],
            listeners   : {
                beforecardswitch : function (ct, newcard, oldcard) {
                    if (newcard.title == 'Full screen') {
                        var panel = new Ext.Panel({
                            fullscreen  : true,
                            dockedItems : [{
                                xtype   : 'toolbar',
                                title   : 'Full screen',
                                dock    : 'top',
                            }],
                            html        : 'Full!'
                        });
                        return false;
                    } else {
                        return true;
                    }
                }
            }
        }); 
    }
});

You would then have to close that panel somehow (a close button probably) so the user could return to the original tab panel. Though you are better off leaving the tab panel as is and add new cards to panels within the tab panel.

Hope this answers your question.