How do I hide the top toolbar of a Ext.Panel? (ExtJS 2.0)

Question

For some reason Ext.Panel.getTopToolbar() is returning an array of objects (the elements of the toolbar, but NOT the toolbar itself) and not an Ext.Toolbar. Because of that, I can't manage to hide an already set toolbar. How should I proceed?

Sample code:

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

Answer 1

It should work, so it sounds like maybe you used topToolbar as a config instead of using tbar as the config? If you set a tbar config it gets instantiated and saved as topToolbar which is the Ext.Toolbar instance exposed by getTopToolbar(). If you overwrote topToolbar directly you might see this issue.

You might find this block of code in Panel.onRender (you'll have to include that file directly) and set a breakpoint in Firebug to see what's happening:

    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

In 4.2.1 what works for me is:

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

Then dynamically I can show/hide the top toolbar:

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