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

<强>更新：带鼠标的控制器（上/下）：

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

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

1 个答案: