GXT 3.0 and the com.sencha.gxt.widget.core.client.Window class - auto-sizing to fit?

[Joe Vahabzadeh]

Ok, so I'm starting to poke around in GXT.... I'm using 3.0 developer preview 5.

I'm trying to do some basic stuff with the Window class, and I'm sort of happy with it. But using it with a BorderLayoutContainer is a bit . . odd . .

If I take a Window and add a VerticalLayoutContainer to it, then when I show the Window,it sizes to being large enough to show all of the contents - very similar to what I'd expect from Swing's JFrame.pack() method.

If I take a Window and add a BorderLayoutContainer to it, add Widgets to the north, south, east, west and center, then show, well, the behavior is a bit weird. The window starts fairly small, and shows only the north area - if I drag out the bottom corner with the mouse to expand it, other elements show, but at first overlapping, then gradually spreading out as I widen the window enough to fit everything.

I don't want to explicitly set the size since for what I ultimately intend to do, the size required to show all the contents will vary. However, there doesn't appear to be a method similar to JFrame's "pack()" as far as I can tell.

Is there any way to get the window to auto-size to be large enough to fit all the contents without overlapping or hiding anything? I imagine that there will be other Layout Panel classes for which this occurs.. already my experimentation with HorizontalLayoutPanel is behaving oddly - at least, oddly relative to what I'd assume based on Swing-like behavior.

Here's the code, without the import declarations:

public class SenchaExperiments implements EntryPoint, SelectHandler {

  TextButton borderLayoutButton = new TextButton("Border Layout");
  TextButton verticalLayoutButton = new TextButton("Vertical Layout");

  @Override
  public void onModuleLoad() {
    FlowPanel panel = new FlowPanel();
    borderLayoutButton.addSelectHandler(this);
    verticalLayoutButton.addSelectHandler(this);
    panel.add(borderLayoutButton);
    panel.add(verticalLayoutButton);
    RootPanel.get().add(panel);
  }

  @Override
  public void onSelect(SelectEvent event) {
    Object source = event.getSource();
    if(source == borderLayoutButton) {
      getBorderLayoutWindow().show();
    }
    else if(source == verticalLayoutButton) {
      getVerticalLayoutWindow().show();
    }
  }

  public Widget getNorthWidget() {
    return new Label("Something in the north section");
  }

  public Widget getSouthWidget() {
    return new Label("Something in the south section");
  }

  public Widget getEastWidget() {
    return new Label("East section");
  }

  public Widget getWestWidget() {
    return new Label("West section");
  }

  public Widget getCenterWidget() {
    VerticalPanel panel = new VerticalPanel();
    panel.add(new Label("But will the window know enough to stretch out to accommodate its contents?"));
    panel.add(new Label("Apparently so."));
    panel.add(new Label("At least, horizontally."));
    panel.add(new Label("But, will it be smart enough"));
    panel.add(new Label("to expand"));
    panel.add(new Label("VERTICALLY?"));
    panel.add(new Label("Maybe if we add"));
    panel.add(new Label("enough extra"));
    panel.add(new Label("lines, "));
    panel.add(new Label("we can find out."));
    return panel;
  }

  public Window getBorderLayoutWindow() {
    Window window = new Window();
    BorderLayoutContainer con = new BorderLayoutContainer();
    window.setHeadingText("Window - BorderLayoutContainer");
    window.setToolTip("Some sort of tooltip info");
    window.setModal(true);
    window.setMaximizable(true);
    window.setMinimizable(true);
    con.setNorthWidget(getNorthWidget());
    con.setSouthWidget(getSouthWidget());
    con.setEastWidget(getEastWidget());
    con.setWestWidget(getWestWidget());
    con.setCenterWidget(getCenterWidget());

    window.add(con);
    window.forceLayout();
    return window;
  }

  public Window getVerticalLayoutWindow() {
    Window window = new Window();
    VerticalLayoutContainer con = new VerticalLayoutContainer();
    window.setHeadingText("Window - VerticalLayoutContainer");
    window.setToolTip("Some sort of tooltip info");
    window.setModal(true);
    window.setMaximizable(true);
    window.setMinimizable(true);
    window.add(con);
    con.add(new Label("But will the window know enough to stretch out to accommodate its contents?"));
    con.add(new Label("Apparently so."));
    con.add(new Label("At least, horizontally."));
    con.add(new Label("But, will it be smart enough"));
    con.add(new Label("to expand"));
    con.add(new Label("VERTICALLY?"));
    return window;
  }
}

[abani patra]

Hi,
I am also trying to use GXT from my eclipse plugin , can you tell how I ll configure I am using GWT 2.* .

[Joe Vahabzadeh]

I was able to just download it from the Sencha website for Developer Preview 5 (linked to from the Sencha Blog page), unzip it, follow the instructions in the setup.txt, and it worked.

However, I have never had GXT 2.x, so I don't know if there are extra steps when upgrading from 2.x to 3.0.

Also, in the setup.txt, the following line is wrong:
<link rel="stylesheet" type="text/css" href="{module name}/css/reset.css" />

It should read:
<link rel="stylesheet" type="text/css" href="{module name}/reset.css" />

(this may have already been fixed, but it was wrong when I downloaded it.