View Full Version : Hiding "Center" Region

13 Dec 2006, 4:45 AM
Hi all,

I have been facing a particular problem. I want a layout with 2 horizontal regions (using border layout), such that I can hide any one of them any time I want. They both should also be collapsible. I tried to do this with combinations of regions like Center-South, North-Center but I am not able to hide or collapse the Center region. I even tried the combination North-South, but then it does not render my toolbar properly.

Anyone has any clues on how to do it??

Thanx in advance

13 Dec 2006, 6:07 AM
The center is the "fill" and doesn't collapse or hide. What are you trying to do? Maybe I can suggest an alternative.

13 Dec 2006, 6:13 AM
Can you do a north/south, while defining the center region in your layout? Then you could use a combination of YAHOO.ext.LayoutManager.getViewSize() and the collapsed, expanded, resized events on the north/south regions to set the size of those regions, keeping center at 0px.

13 Dec 2006, 8:46 AM

You can have a look at the basic layout I want. Everything except the Page Header should be collapsible. I should also be able to hide them. I am using Border Layout.

Actually our application has some old modules, which need to be displayed as is. And some newer ones which I have converted in a Grid and a corresponding Preview Pane Beneath it. However, both the kind of modules can be accessed from a common tree on the left. Now, when a user clicks on a new module, he should see a grid and a preview pane. No probs till now. But when he clicks on an old module, there should be no grid, and the entire content of the page should be displayed in the right area (Grid + Preview area) as is.

So I thought I would make an Iframe in the Preview Pane and when an old module needs to be loaded, I will simply hide the Grid Area and then load the corresponding page in the Iframe. But I am not able to hide the Grid coz it is defined as "Center" area, and as Jack said, its a fill. So, it cant be collapsed or hidden. And I cannot make it "North" and make the Preview Pane "Center" coz the Preview Pane should be collapsible.

Any solutions??

13 Dec 2006, 8:48 AM
And yeah jbowman, I will try ur solution. I think it should work, but there must be a simpler solution.

20 Dec 2006, 10:45 AM
I figured out an easier solution... I loaded 2 content panels in the center region, one with the grid and one with an empty Iframe.... then when I need to load the old modules, I just hide the south region and also the gridpanel.... otherwise I hide the Iframe panel and show the other two

But I have a small problem now, I have a tab panel in the center region, and I am not able to make it go away.....

I have uploaded a working copy of it at -
user: admin
pass: admin

You might have to login twice. That is a small bug I am trying to fix. Right now its a very flimsy code by me... I am still learning :)

21 Dec 2006, 12:27 AM
The browser sends what language you prefer in the HTTP request, theres no need for a selection.

21 Dec 2006, 8:20 AM
Sorry for the inconvenience but the link I mentioned in the previous post had been reverted to the old app, and will remain that way for a few days..... I will post the link to the new app shortly...

25 Dec 2006, 9:57 AM
ok the new app is up again on the same link, i.e.
user: admin
pass: admin

25 Dec 2006, 3:47 PM
That looks sharp.

You can lose the border on the top toolbar (and under the tab) with this css:

.ylayout-panel-center .ytoolbar { border:0 none; }

You can optionally use the panel's id as well (probably better but I didn't want to hunt for it).

25 Dec 2006, 8:46 PM
Thanx for the tip Jack, I never noticed it. I modified the css a bit though

.ylayout-panel-center .ytoolbar {
border:0 none;
border-bottom: 1px solid #CBC7B8;

It looks better now, thanx.


2 Jan 2007, 10:38 AM
Whats the filter combo search widget in the toolbar of the grid? It's really neat.

Also can you post a link to this site under 'Examples and Extras'


2 Jan 2007, 10:50 AM
Well, thats not a readymade widget.... my PM asked me to design a replacement for the search box u see in the left panel, so I just came up with something.... its still buggy in Opera... btw thats a nice name for the widget :D

I'll surely put the link in there shortly.... just fixing some critical bugs :)

3 Jan 2007, 12:49 AM
Very cool app.

I think that you should have autoScroll:false in your south "preview" Region, and let the IFRAME handle scrolling. As it is, there are TWO scrollbars there, one for the Region, and one for the IFRAME.

Use Firebug to set elgen-34's (The ylayout-panel-body for the south Region) style to overflow:hidden, and it looks better.

3 Jan 2007, 3:44 AM
Thanx for the tips Animal... I m happy u ppl like it