GWT Layout issue

Question

I wrote below code, I could not set the panel to the rightmost side of the container. I want control in moving the panel all the sides, like east, west, north and south.

public void onModuleLoad() {
    Viewport viewport = new Viewport();
    viewport.setLayout(new FlowLayout());
    viewport.add(createContainer());
    RootPanel.get().add(viewport);
}

private Widget createContainer() {
    // TODO Auto-generated method stub
    LayoutContainer container = new LayoutContainer();
    container.setLayout`enter code here`(new BorderLayout());
    ContentPanel panel = new ContentPanel(new FitLayout());
    panel.setHeading("The Legend");
    BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 250);
    westData.setSplit(true);
    westData.setCollapsible(true);
    westData.setMargins(new Margins(0, 3, 0, 0));
    container.add(panel, westData);
    return container;
}

Can someone help?

Answer 1

It looks like your are using GXT. This is a very important information because GXT layout uses other classes than native GWT layout.

Take a look a the Sencha Showcase:

http://www.sencha.com/examples/#ExamplePlace:borderlayout

The BorderLayout example shows how to create a border layout.

First create a BorderLayoutContainer:

final BorderLayoutContainer con = new BorderLayoutContainer();
con.setBorders(true);

Then create panels for the areas you like to have:

ContentPanel north = new ContentPanel();
ContentPanel west = new ContentPanel();
ContentPanel center = new ContentPanel();
center.setHeadingText("BorderLayout Example");

center.setResize(false);
center.add(new Label("center"));
 
ContentPanel east = new ContentPanel();
ContentPanel south = new ContentPanel();

After creating the ContentPanels define the BorderLAyoutData for each ContentPanel:

BorderLayoutData northData = new BorderLayoutData(100);
northData.setMargins(new Margins(5));
northData.setCollapsible(true);
northData.setSplit(true);
 
BorderLayoutData westData = new BorderLayoutData(150);
westData.setCollapsible(true);
westData.setSplit(true);
westData.setCollapseMini(true);
westData.setMargins(new Margins(0, 5, 0, 5));
 
MarginData centerData = new MarginData();
BorderLayoutData eastData = new BorderLayoutData(150);
eastData.setMargins(new Margins(0, 5, 0, 5));
eastData.setCollapsible(true);
eastData.setSplit(true);

BorderLayoutData southData = new BorderLayoutData(100);
southData.setMargins(new Margins(5));
southData.setCollapsible(true);
southData.setCollapseMini(true);

After you have defined the layouts, just add your widgets to the BorderLAyoutContainer:

con.setNorthWidget(north, northData);
con.setWestWidget(west, westData);
con.setCenterWidget(center, centerData);
con.setEastWidget(east, eastData);
con.setSouthWidget(south, southData);

Finally, add the BorderLAyoutContainer to the viewPort:

viewport.add(con); 

To put your widget on the right most side, use:

con.setEastWidget(widget, eastData);

Hope that helps.

Answer 2

I am also facing this issue as whenever i am trying to collapse the north then that space is NOT being occupied by the South and neither vice versa is happening. I want that whenever we are collapsing the contentPanel (north or south), its space should be occupied by the other Panels.

I am using gxt 3.0.1 in my project.

For gxt 2.x it can be done with the FitLayout() and by setting the layout but in the GXT 3.0.1 the API is different. I am not able to use the FitLayout().

Any new Ideas guys.