Как показать скрытый виджет на рабочем столе/панели с extjs?

Question

У меня есть панель инструментов на моем рабочем столе. также у меня есть кнопка на рабочем столе для показа и скрытия этой панели инструментов. В настоящий момент у меня есть дополнительная кнопка для скрытия в самой панели инструментов и ее работы в порядке. если Иам скрывает это, панель полностью инициализирован и panel1.object (см код ниже) выглядит следующим образом:

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 

если я пытаюсь показать свою панель инструментов с внешней кнопкой на Dekstop мой panel1.object намного короче.

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 

я пытаюсь показать, как этот (код от контроллера):

onShowToolbar: function() { 
     debugger; 

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

, как я могу показать это * панель инструментов право? пожалуйста помоги!

Answer 1

Простой пример. Панель с панелью инструментов и кнопкой. Нажмите кнопку «Показать» или «Скрыть панель инструментов».
Вид:

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

Контроллер:

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: контроллер с помощью мыши (более/менее):

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