Search code examples
javagwtgxt

GXT 3 ContentPanel autoheight or FillLayout


I can't get ContentPanel to take all the available height inside BorderLayoutContainer.

In version 2.x it was as simple, as setLayout(new FillLayout());, but it is no longer valid for GXT 3.0.x.

To make my problem clear, I've taken the example from here GXT 3 demo, here's how it is supposed to look:Border layout demo but when the same exact code from the example is copied into my project, it looks like this: same thing copied to my project

The layout seems to be broken. It renders the same in Chrome 22.0.x and Firefox 16.0.1. I use GWT 2.4 and GXT 3.0.1. My html page contains

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

and <link rel="stylesheet" type="text/css" href="modeluname/reset.css" />


Solution

  • The Explorer is assigning a size, probably a mistake, since it makes the example less portable. The size is being assigned from the parent (the tab panel with both Demo and Source), which in turn gets it from a parent (the main tab panel), and so on. To deal with this, make sure to set a size.

    Generally, you don't want to set a size on the root widget - you just want to make it always fit the available space in the browser. This means you want to add everything to a Viewport. Working from the source at http://www.sencha.com/examples/#ExamplePlace:borderlayout%28uibinder%29's onModuleLoad:

    public void onModuleLoad() {
      Viewport viewport = new Viewport();
      viewport.setWidget(asWidget());
      RootPanel.get().add(viewport);
    }
    

    As far as FitLayout goes, it isn't actually necessary - any container that only takes one child already essentially has a FitLayout in GXT 3. The main problems that occur in 2 are the same as in 3 - some parent isn't passing on a size to its child - and they need to be solved the same way.

    You can opt out of the default fitlayout-like behavior too - call setResize(false) on any SimpleContainer (i.e. ContentPanel, FramedPanel, etc). You'll typically want this to be on though, as is the default.