For my first app, which will have one tab with an ext.list and one tab with some simple HTML.

I need a back button and a title on the details pane of the ext.list items. The structure I use only has one toolbar on the corresponding Tab. When I add the toolbars separately, which will be the most easy solution, I will get problems (tab bar won't horizontally stretch on the details pane and won't show on the ext. list).

So I hope there is a solution to add stuff on a single toolbar, according to the active panel.
(something like "if details pane is active, show title and back button)

I can't find how to do this, so I ask for help on the matter.

This is my code:

Code:
Ext.ns('ShotjesApp');
Ext.setup({
    onReady: function() {
    ShotjesApp.Main.init();
    }
});


Ext.regModel('Contact', {
    fields: ['Naam', 'Basis', 'Inhoud']
});


ListStore = new Ext.data.Store({
    model: 'Contact',
    sorters: 'Naam',
    getGroupString : function(record) {
        return record.get('Naam')[0];
    },
    data: [
        { Naam: "Domino",      Basis: "Derval",        Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Elektra",     Basis: "King",         Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Fiona",       Basis: "Volpe",         Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Holly",       Basis: "Goodhead",     Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Honey",       Basis: "Rider",        Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Jill",        Basis: "Masterton",     Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Kissy",       Basis: "Suzuki",     Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Mary",        Basis: "Goodnight",     Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Miranda",     Basis: "Frost",         Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Molly",       Basis: "Warmflash",    Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Paula",       Basis: "Caplan",     Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Penelope",    Basis: "Smallbone",    Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Plenty",      Basis: "O'Toole",    Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Pussy",       Basis: "Galore",        Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Strawberry",  Basis: "Fields",        Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Sylvia",      Basis: "Trench",        Inhoud: "XXX 1<br> XXX 2 <br> XXX 3"},
        { Naam: "Tatiana",     Basis: "Romanova",    Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Tilly",       Basis: "Masterton",    Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
    ]
});




// my list
ShotjesApp.listPanel = new Ext.List ({
    store: ListStore,
    id: 'listpanel',
    layout: 'fit',
    itemTpl: '<div><p><strong>{Naam}</strong></div>',
    onItemDisclosure: function(record) {
        var naam = record.data.Naam;
                ShotjesApp.detailPanel.update(record.data);
                ShotjesApp.listContainer.setActiveItem(ShotjesApp.detailPanel, {type:'slide', direction:'left'}); 
                ShotjesApp.detailPanel.dockedItems.items[0].setTitle(naam);        
            }
});


ShotjesApp.detailPanel = new Ext.Panel({
            id: 'detailpanel',
            tpl: 'Omschrijving: {Naam} <br> <br> {Inhoud}',
            layout: 'auto',
        });


ShotjesApp.listContainer = new Ext.Container ({
    layout: 'card',
    items: [ShotjesApp.listPanel, ShotjesApp.detailPanel] ,
})




ShotjesApp.mainToolbar = new Ext.TabPanel ({
    flex: 1,
    xtype: 'tabpanel',
    tabBar: {
        dock: 'bottom',
        layout: {
            pack: 'center'
        }
    },
    ui: 'dark',
    cardSwitchAnimation: {
        type: 'fade',
        cover: true
    },
    defaults: {
        scroll: 'vertical'
    },
    items: [{
        layout: 'vbox',
        title: 'Home',
        iconCls: 'mail',
        layout: 'fit',
        dockedItems: [{
                xtype: 'toolbar',
                dock: 'top',
                scroll: {
                    direction: 'horizontal',
                    scrollbars: false
            },
                items: [{
                        text: 'terug',
                        ui: 'back',
                        handler: function() {
                        ShotjesApp.listContainer.setActiveItem('listpanel', {type:'slide', direction:'right'});
                        }
                    }]
           
        }],
        items: ShotjesApp.listContainer
    }, {
        title: 'tab2',
        iconCls: 'bookmarks',
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            scroll: {
                direction: 'horizontal',
                scrollbars: false
            },
            layout: {
                pack: 'center'
            },
           
        }]
    }, {
        title: 'tab3',
        iconCls: 'bookmarks',
         dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            scroll: {
                direction: 'horizontal',
                scrollbars: false
            },
            layout: {
                pack: 'center'
            },
           
        }]
    }]
})


ShotjesApp.Main = {
    init : function() {
        new Ext.Panel({
            fullscreen: true,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: ShotjesApp.mainToolbar
        });
    }
};
As you can see, for now I show the back button all the time. Also, no title yet, although I did put some functionality in the details pane which would fetch the title.