[SENCHA]Hide backbutton on the main-panel

The structure of my first app I want to make is almost done. One small problem which turned out to be a pain to solve for me. I use a ext. list with a onitemdisclosure function to show some details when you press a item on the list. I need a back button, so I added this to the toolbar of the corresponding tab.

I can't figure out how to only show it when the detailspane is active though. Searched on the Sencha forums, on StackoverFlow, Google, but can't seem to figure it out on my own.

This is my code:

Ext.ns('ShotjesApp');
Ext.setup({
    onReady: function() {
    ShotjesApp.Main.init()开发者_StackOverflow社区;
    }
});

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" },
]
});


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
        });
    }
};

You can use the itemId to get a reference to the button:

mybutton = getComponent("buttonId");

(you may need to nest these calls to get down to your component in the heirarchy)

then manually show/hide it using the show()/hide() methods - you can do this in your selection handler (to show it when they select an item from the list to go to the detail view) and in the back button handler itself you can hide it.

mybutton.hide();
mybutton.show();