Having problems with creating layout containers

[nickibckr]

Hi:
I'm new to GXT, and I am pretty sure this must be a setup issue, but I cannot figure it out.

I'm trying to recreate the PortalDemo layout. Using GXT 1.2.
My code is as follows:

publicvoid onModuleLoad() {
RootPanel.get().add(newTestLayoutContainer());
}




public

class TestLayoutContainer extends LayoutContainer {

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


LayoutContainer north = new LayoutContainer();
BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH, 30);


ContentPanel west = new ContentPanel();
west.setBodyBorder(false);
west.setHeading("West");
west.setLayout(new AccordionLayout());


ContentPanel nav = new ContentPanel();
nav.add(new SpecTree());
nav.setScrollMode(Scroll.AUTO);
nav.setHeading("Navigation");
nav.setBorders(false);
nav.setBodyStyle("fontSize: 12px; padding: 6px");
nav.addText("TESTING");
west.add(nav);


ContentPanel settings = new ContentPanel();
settings.setHeading("Settings");
settings.setBorders(false);
west.add(settings);


BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 200, 100, 300);
westData.setMargins(new Margins(5, 0, 5, 5));
westData.setCollapsible(true);


Portal portal = new Portal(3);
portal.setBorders(true);
portal.setStyleAttribute("backgroundColor", "white");
portal.setColumnWidth(0, .33);
portal.setColumnWidth(1, .33);
portal.setColumnWidth(2, .33);


Portlet portlet = new Portlet();
portlet.setHeading("Grid in a Portlet");
configPanel(portlet);
portlet.setLayout(new FitLayout());
//portlet.add(createGrid());
portlet.setHeight(250);


portal.add(portlet, 0);


portlet = new Portlet();
portlet.setHeading("Another Panel 1");
configPanel(portlet);
portlet.addText(getBogusText());
portal.add(portlet, 0);


portlet = new Portlet();
portlet.setHeading("Panel 2");
configPanel(portlet);
portlet.addText(getBogusText());
portal.add(portlet, 1);


portlet = new Portlet();
portlet.setHeading("Another Panel 2");
configPanel(portlet);
portlet.addText(getBogusText());
portal.add(portlet, 1);


portlet = new Portlet();
portlet.setHeading("Panel 3");
configPanel(portlet);
portlet.addText(getBogusText());
portal.add(portlet, 2);


BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
centerData.setMargins(new Margins(5));


add(north, northData);
add(west, westData);
add(portal, centerData);
}


private String getBogusText() {
return"<div class=text style='padding: 5px'>" + "TESTING" + "</div>";
}


privatevoid configPanel(final ContentPanel panel) {
panel.setCollapsible(true);
panel.setAnimCollapse(false);
panel.getHeader().addTool(new ToolButton("x-tool-gear"));
panel.getHeader().addTool(
new ToolButton("x-tool-close", new SelectionListener<ComponentEvent>() {


@Override
publicvoid componentSelected(ComponentEvent ce) {
panel.removeFromParent();
}


}));
}



}



But, what comes up is the GWT browser looks like a very squished version of the page.
(See attachment for example)
What am I missing? (Eclipse is my IDE).


Thanks for any help..

[sven]

Use a Viewport or set some size on the TestLayoutContainer.

[nickibckr]

Got it, thx!