如何隐藏 Ext.Panel 的顶部工具栏？ （ExtJS 2.0）

Question

由于某种原因 Ext.Panel.getTopToolbar() 返回一个对象数组（工具栏的元素，但不是工具栏本身）而不是 Ext.Toolbar。因此，我无法隐藏已经设置的工具栏。我该怎么办？

示例代码：

function (panel)
{
    alert(panel.getTopToolbar()); // displays the list of elements in the toolbar
    panel.getTopToolbar().hide(); // error: "hide" is not a function
}

Answer 1

它应该可以工作，所以听起来你可能使用

topToolbar

作为配置而不是使用

tbar

作为配置？如果您设置

tbar

配置，它将被实例化并保存为

topToolbar

，这是由

Ext.Toolbar

公开的

getTopToolbar()

实例。如果您直接覆盖 topToolbar，您可能会看到此问题。

您可能会在

Panel.onRender

中找到这段代码（您必须直接包含该文件）并在 Firebug 中设置断点以查看发生了什么：

    if(this.tbar && this.topToolbar){
        if(this.topToolbar instanceof Array){
            this.topToolbar = new Ext.Toolbar(this.topToolbar);
        }
        this.topToolbar.render(this.tbar);
    }

Answer 2

panel.getTopToolbar().setVisible(false);

Answer 3

在

4.2.1

中对我有用的是：

          var topToolbar = Ext.create('Ext.toolbar.Toolbar', {
              dock: 'top',
              width: 'auto',
              id: 'mytoolbar',
              hidden: true,
              items: [...]
          });


            var p = Ext.create('App.view.MyCustomPanel', {
                html: 'test',
            });

            if (userCanSeeToolbar) {
              p.addDocked(topToolbar);
            }

然后我可以动态地显示/隐藏顶部工具栏：

 /* if (userCanSeeToolbar) { */
 p.getDockedComponent('mytoolbar').show();
 p.getDockedComponent('mytoolbar').hide();