如何隐藏 Ext.Panel 的顶部工具栏？ (ExtJS 2.0)答案

【问题标题】：How do I hide the top toolbar of a Ext.Panel? (ExtJS 2.0)如何隐藏 Ext.Panel 的顶部工具栏？ (ExtJS 2.0)
【发布时间】：2010-09-18 22:54:50
【问题描述】：

由于某种原因，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
}

【问题讨论】：

标签： extjs toolbar

【解决方案1】：

它应该可以工作，所以听起来您可能使用topToolbar 作为配置而不是使用tbar 作为配置？如果你设置了tbar 配置，它会被实例化并保存为topToolbar，这是getTopToolbar() 公开的Ext.Toolbar 实例。如果您直接覆盖 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);
    }

【讨论】：

并非如此。我在实例化 Exp.Panel 时设置了 tbar。您的意思是，如果 panel.topToolbar 设置为数组，可以解释发生了什么？
您需要使用 Firebug 并找出 panel.getTopToolbar() 实际返回的内容。我没有办法猜测。默认情况下，您的代码应该可以正常工作，因此必须在您发布的内容之外发生一些事情。

【解决方案2】：

panel.getTopToolbar().setVisible(false);

【讨论】：

您应该添加说明为什么您认为这会有所帮助。

【解决方案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();

【讨论】：