GXT 3.1 Vertical Layout Example using the CSS Float Layout Container

VerticalLayoutExample.java

import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.widget.core.client.container.CssFloatLayoutContainer;
import com.sencha.gxt.widget.core.client.container.CssFloatLayoutContainer.CssFloatData;
import com.sencha.gxt.widget.core.client.container.MarginData;
import com.sencha.gxt.widget.core.client.container.SimpleContainer;

public class VerticalLayoutExample {

  public VerticalLayoutExample() {
    // Parent container with a specific width
    // For this example, its added to the root
    SimpleContainer parent = new SimpleContainer();
    parent.setBorders(true);    

    // The parent is responsible for width.
    // The children are responsible for the height.
    // It's parent could be setting this width and height.
    parent.setPixelSize(700, -1);
    
    // add some margins for example
    parent.add(getVerticalLayoutWidgets(), new MarginData(20));
    
    RootPanel.get().add(parent);
  }

  private Widget getVerticalLayoutWidgets() {
    CssFloatLayoutContainer con = new CssFloatLayoutContainer();
    // new CssFloatData(1) set the width to 100%
    con.add(getRowWidget(1), new CssFloatData(1));
    con.add(getRowWidget(2), new CssFloatData(1));
    con.add(getRowWidget(3), new CssFloatData(1));

    return con;
  }

  // Simple row widget
  public Widget getRowWidget(int level) {
    HTML html = new HTML("level " + level);

    SimpleContainer w = new SimpleContainer();
    w.setBorders(true);
    w.add(html, new MarginData(10));
    return w;
  }

}