Nesting BorderLayout

[jasper]

Hi,

I'm trying to nest a BorderLayout, but the inner BorderLayout fails to render. I've tried a few variations but no luck. I've reproduced in a simple example (pasted below). Any advice would be very welcome. Thanks, Jasper


import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.HtmlContainer;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class TestApp1 implements EntryPoint {

public void onModuleLoad() {
ContentPanel panel = new ContentPanel();
panel.setLayout(new BorderLayout());

HtmlContainer west = new HtmlContainer("WEST");
BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 100);
westData.setCollapsible(false);
westData.setFloatable(false);
westData.setSplit(true);
westData.setMargins(new Margins(0, 0, 5, 0));

ContentPanel east = new ContentPanel();
east.setTitle("CENTER");
east.setLayout(new BorderLayout());

HtmlContainer htmlCenter = new HtmlContainer("CENTER and CENTER");
BorderLayoutData htmlCenterData = new BorderLayoutData(LayoutRegion.CENTER, 100);
htmlCenterData.setCollapsible(false);
htmlCenterData.setFloatable(false);
htmlCenterData.setSplit(true);
htmlCenterData.setMargins(new Margins(0, 1, 5, 0));
htmlCenterData.setMinSize(500);
htmlCenter.setAutoWidth(true);
htmlCenter.setAutoHeight(true);
east.add(htmlCenter, htmlCenterData);

HtmlContainer htmlSouth = new HtmlContainer("CENTER and SOUTH");
BorderLayoutData htmlSouthData = new BorderLayoutData(LayoutRegion.SOUTH, 100);
htmlSouthData.setCollapsible(false);
htmlSouthData.setFloatable(false);
htmlSouthData.setSplit(true);
htmlSouthData.setMargins(new Margins(0, 1, 5, 0));
htmlSouthData.setMinSize(500);
htmlSouth.setAutoWidth(true);
htmlSouth.setAutoHeight(true);
east.add(htmlSouth, htmlSouthData);

BorderLayoutData eastData = new BorderLayoutData(LayoutRegion.CENTER, 100);
eastData.setCollapsible(false);
eastData.setFloatable(false);
eastData.setSplit(true);
eastData.setMargins(new Margins(0, 1, 5, 0));
east.setAutoWidth(true);
east.setAutoHeight(true);
eastData.setMinSize(500);

panel.add(west, westData);
panel.add(east, eastData);

panel.setSize(700, 400);
RootPanel.get().add(panel);
}
}

[dongles]

I'm seeing this problem as well. Was there a resolution to this issue? Are nested border layouts supported?

[sven]

Dont use autoheigt/width the regions.

[dongles]

Thanks for the reply sven but that didn't fix my problem. I've put together a simplified version of the problem that I'm seeing.



public class TestNestedLayout implements EntryPoint {

public void onModuleLoad() {

Viewport viewport = new Viewport();
viewport.setLayout(new BorderLayout());

HtmlContainer northPanel = new HtmlContainer("<div>Bogus Header</div>");
BorderLayoutData data = new BorderLayoutData(LayoutRegion.NORTH, 33);
data.setMargins(new Margins());
viewport.add(northPanel, data);

LayoutContainer container = new LayoutContainer();
container.setLayout(new FlowLayout());
container.setScrollMode(Scroll.AUTO);

ContentPanel panel = new ContentPanel();
panel.setHeading("Bogus Slide");
panel.setLayout(new FitLayout());
panel.add(new NestedLayout());

container.add(panel);

viewport.add(container, new BorderLayoutData(LayoutRegion.CENTER));

RootPanel.get().add(viewport);
}
}

class NestedLayout extends LayoutContainer {

public NestedLayout() {
setLayout(new BorderLayout());

HtmlContainer center = new HtmlContainer("<div>Bogus Center Panel</div>");

BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER, .5f);
centerData.setSplit(true);
centerData.setCollapsible(true);
centerData.setMargins(new Margins(2));

HtmlContainer east = new HtmlContainer("<div>Bogus East Panel</div>");

BorderLayoutData eastData = new BorderLayoutData(LayoutRegion.EAST, .5f);
eastData.setSplit(true);
eastData.setCollapsible(true);
eastData.setMargins(new Margins(2));

add(east, eastData);
add(center, centerData);
}

}
I've attached a screenshot of the result.

[sven]

LayoutContainer container = new LayoutContainer();
container.setLayout(new FlowLayout());
container.setScrollMode(Scroll.AUTO);

ContentPanel panel = new ContentPanel();
panel.setSize(500,500);
panel.setHeading("Bogus Slide");
panel.setLayout(new FitLayout());
panel.add(new NestedLayout());