PDA

View Full Version : Hiding "Center" Region



manugoel2003
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

jack.slocum
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.

jbowman
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.

manugoel2003
13 Dec 2006, 8:46 AM
http://img81.imageshack.us/img81/9994/pagelayoutbh6.gif

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??

manugoel2003
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.

manugoel2003
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 -
http://www.e11helpdesk.com/helpdesk/admin/index.php
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 :)

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

manugoel2003
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...

manugoel2003
25 Dec 2006, 9:57 AM
ok the new app is up again on the same link, i.e.
http://www.e11helpdesk.com/helpdesk/admin/index.php
user: admin
pass: admin

jack.slocum
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).

manugoel2003
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.


Manu
manu@value-one.com
www.e11online.com

sjivan
2 Jan 2007, 10:38 AM
Manu,
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'

Thanks,
Sanjiv

manugoel2003
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 :)

Animal
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.

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