如何使用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();
    }
});