how to show hidden widget in desktop/panel with extjs?

Question

i have a toolbar in my desktop. also i have a button on desktop for showing and hiding this toolbar. at the moment i have extra button for hiding in toolbar itself and its works ok. if Iam hiding it, toolbar is completely initialized and panel1.object (see code below) looks like this:

activeUI: "default"
autoGenId: true
body: constructor
collapseDirection: "top"
componentCls: "x-panel"
componentLayout: constructor
componentLayoutCounter: 2
container: constructor
dd: constructor
dock: "top"
dockedItems: constructor
el: constructor
events: Object
floatingItems: constructor
frame: undefined
hasListeners: HasListeners
height: 35
hidden: true
hiddenByLayout: null
hiddenOnCollapse: constructor
hierarchyState: Object
hierarchyStateInner: Object
id: "TESTtoolbarX-1034"
initialConfig: Object
initialStyle: Object
items: constructor
lastBox: Object
layout: constructor
layoutCounter: 2
loader: null
margin$: Object
ownerCt: constructor
ownerLayout: constructor
plugins: undefined
pluginsInitialized: true
protoEl: null
renderData: Object
renderSelectors: Object
rendered: true
rendering: null
scrollFlags: Object
stateEvents: Array[0]
stateId: undefined
tools: Array[0]
ui: "default"
uiCls: Array[1]
x: 0
y: 0
__proto__: Object

if i'm trying to SHOW my toolbar with external button on the dekstop my panel1.object is much shorter.

autoGenId: true
collapseDirection: "top"
componentCls: "x-panel"
componentLayout: constructor
dockedItems: constructor
events: Object
floatingItems: constructor
hasListeners: HasListeners
height: 35
hiddenOnCollapse: constructor
id: "TESTtoolbarX-1067"
initialConfig: Object
initialStyle: Object
items: constructor
layout: constructor
loader: null
plugins: undefined
pluginsInitialized: true
protoEl: constructor
renderData: Object
renderSelectors: Object
stateEvents: Array[0]
stateId: undefined
__proto__: Object

i'm trying to show it like this (Code from Controller):

 onShowToolbar: function() {
        debugger;

        var panel1 = Ext.create('TEST.view.desktop.Toolbar', { maxWidth: 360, height: 35 });
        panel1.show();},

how i can show this * toolbar right? please help!

Answer 1

Simple example. Panel with toolbar and button. Click on button show or hide toolbar.
View:

Ext.define('TEST.view.desktop.Desktop', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.desktop.Desktop',

    initComponent: function () {
        var me = this;
        Ext.applyIf(me, {
            dockedItems: [
                {
                    xtype: 'toolbar',
                    hidden: true
                }
            ],
            items: [
                {
                    xtype: 'button',
                    action: 'testbutton'
                }
            ]
        });
        me.callParent(arguments);
    }
});

Controller:

Ext.define('TEST.controller.desktop.Desktop', {
    extend: 'Ext.app.Controller',

    views: ['desktop.Desktop'],

    init: function () {
        this.control({
            '[xtype=desktop.Desktop] button[action=testbutton]': {
                click: this.showHideToolbar
            }
        });
    },

    showHideToolbar: function (button) {
        var tb = button.up('panel').down('toolbar');
        if (tb.isVisible()) {
            tb.hide();
        } else {
            tb.show();
        }
    }
});

UPDATE: Controller with mouse(over/out):

Ext.define('TEST.controller.desktop.Desktop', {
    extend: 'Ext.app.Controller',

    views: ['desktop.Desktop'],

    init: function () {
        this.control({
            '[xtype=desktop.Desktop] button[action=testbutton]': {
                mouseover: this.showToolbar,
                mouseout: this.hideToolbar
            }
        });
    },

    showToolbar: function (button) {
        var tb = button.up('panel').down('toolbar');
        tb.show();
    },

    hideToolbar: function (button) {
        var tb = button.up('panel').down('toolbar');
        tb.hide();
    }
});