如何使用extjs在桌面/面板中显示隐藏的小部件

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

本文关键字：显示 隐藏 小部 extjs 何使用 桌面      更新时间：2023-09-26

我的桌面上有一个工具栏。我在桌面上还有一个按钮，用来显示和隐藏这个工具栏。目前，我有一个额外的按钮隐藏在工具栏本身，它的工作原理还可以。如果我隐藏它，工具栏将完全初始化，panel.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

如果我试图在桌面上显示带有外部按钮的工具栏，我的panel1对象会短得多。

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

如何显示这个*工具栏？请帮忙！

简单示例。带有工具栏和按钮的面板。单击按钮显示或隐藏工具栏
视图：

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

更新：带鼠标的控制器（在外）：

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();
    }
});
相关文章：