View Full Version : toggle display toolbar

8 May 2007, 4:35 AM

I have a toolbar which is added to a headerPanel of a grid layout, like so:

var hp = grid.getView().getHeaderPanel(true);
var fpToolbar = new Ext.Toolbar(hp);

What I want to do now is add a button to the paging toolbar, which is added to the FooterPanel of the same grid layout. This button should toggle the display of the 'top' toolbar (the fpToolbar).

How would I go about doing this? Ideally I would also like to use slideIn().

8 May 2007, 8:49 AM
You have a ref to the top toolbar and the pagingtoolbar shows you how to add buttons and handlers to handle the click and toolbar has show/hide methods. Have you attempted this? Animation is cool, but you need to get the basics to work first.

8 May 2007, 8:55 AM
Here is fragment of my code. I'm adding separator, text and input field with this code. Adjust it to your needs:

paging.add('-', this.filterText + ': ');
var filter = Ext.get(paging.addDom({
tag: 'input'
, type: 'text'
, size: 30
, value: ''
, cls: 'p-grid-filter'

9 May 2007, 6:32 AM
... and toolbar has show/hide methods ...

Well, my toolbar sure hasn't got any show/hide methods. Or do you mean the show/hide methods of the element of the toolbar? That *does* have show/hide methods, and I tried to hide the toolbar by using fpToolbar.getEl().hide() but that didn't do anything. Is there something I am overlooking?

Thanks for your reply

9 May 2007, 10:13 AM
This works, but you could also just hide the headerPanel - you may have to call grid.autosize after show/hide

var tb = new Ext.Toolbar('b3');
<div id="b3" style="width:200px"></div>

10 May 2007, 4:08 AM
Thank you for your replies, the problem was that I called .hide too quickly, before the toolbar was rendered /:) Anyway, it works now. However, it does cause the grid to 'hop' slightly when grid.autoSize() is called. Any way to improve on that?

10 May 2007, 4:12 AM
If you don't really need to hide the toolbar but the mask and disable would be sufficient you won't get these unwanted effects.

I was solving the same problem for paging toolbar. I just mask and disable it and it looks nice.

There is a thread on this.