PDA

View Full Version : Content Panel Swapping Questions



hunkybill
6 Jan 2007, 12:09 PM
Hi,

I don't have public code yet, but I will take a chance and see if I can't get a little help.

I have a full-screen BorderLayout with north, south, center and west regions. 'north' is a header, 'south' is a footer, 'west' is a sidebar style zone, with a View inside it. 'center' is a huge catch-all zone in the layout, with three ContentPanels.

The 'center' three panels, a GridPanel, and two ContentPanels, provide three nice tabs. A click on the list in 'west', fills a PropsGrid in the 'center' GridPanel. Since the 'center' region occupies most of the layout, it is large. If I set nothing special for the container of this grid in CSS, the two columns occupy the entire center region, 50/50. Not ideal for a properties grid, so I set a style on the grid's container. I found only this would work and be respected by FF1.5, namely



#myGridPanel {
position:relative;
overflow:hidden;
width:400px !important;
}


With that my properties grid occupies the entire center, but the two columns are restricted to 400px of space.

Here is where my dilemma comes in. I want to reuse the properties grid panel in a LayoutDialog. I use a little LayoutRegion code to remove() the GridPanel from the 'center' region, preserving the panel using



var panel = region.remove(ctrl.panelId, true);


This returns my ContentPanel (a subclassed GridPanel), and removes it from the BorderLayout. I then get a handle to my LayoutDialog's 'center' region, and using the code



layout.add('center',panel);


I get the panel inserted into the dialog. Except it remains hidden by some inline generated CSS settings wrapping the grid, visiblity:hidden, top:-20000px, left:-20000px, making it hard to see :)

If I remove the panel from the LayoutDialog region and re-add it to my main BorderLayout 'center' region, the panel is visible and works fine, once again providing me a tab in my main center region, so I know the remove/add panel code is working. It has however LOST it's respect for the CSS width:400px rule, and expands once again to fill the entire 'center' region at 50/50.

One visibility work-around has been to extract the panel, but instead of adding that to the LayoutDialog, create a new GridPanel with the grid from extracted panel. Adding that new panel has no visibility problems. However, this panel exhibits a problem in that it is sized to the main 'center' layout region, so when it gets inserted into the smaller LayoutDialog container, it has an enormous scrollbar as the 50/50 split remains (although the CSS rule width:400px is respected but looks odd in the dialog unless I size the dialog to be pixel perfect to that).

If I so much a touch any of the resizable aspects of the Dialog itself, the grid adjusts nicely to a 50/50 split inside the LayoutDialog. Is there a way to harness that without resizing the Dialog? That would be great. Why is an extracted ContentPanel hidden when added to a layout? How to make it visible? showPanel(0) on the LayoutDialog's region 'center' did not work. Is there a way to resize a ContentPanel to fit a new container when doing this method of remove, add, remove, add between BorderLayouts?

It really works quite well, just curious about those aspects.

Any tips most appreciated. Thanks!!