Please explain Ext-GWTs layouting (and resizing) model to me

Question

I cannot seem to get my head around how to do a proper layout in Ext GWT that responds properly to resizes.

I assume that I can declaratively specify layouts, put my components in them, and let the library take care of the rest; I just haven't figured out how yet. What I really don't want to be doing is writing resize handlers for my components to calculate and set the size of the subcomponents at every resize event.

My application should fill the entire browser window, and consists of a number of tabs. Every tab page should fill the remaining space available after the tab bar. Actually, this is the problem I keep having. I have some fixed size controls at the top or left of the screen/component (a toolbar, a folder bar, etc.), and the remaining controls should take up the remainder of the available space.

I have already figured out that I should be using a Viewport as my top-level component, and probably FitLayout should factor in there somewhere. But what kind of resize-aware layout do I use to allocate a bit of space to my fixed-size controls (preferably their natural size so I don't have to specify that as well) and have the other controls take up the remainder?

And is it correct that I am building my custom controls (as a combination of existing controls) as a subclass of LayoutContainer? So far, I've been using LayoutContainers with a FlowLayout and fixed-size subcontrols, and while that works in a sense, it cannot respond to parent container resizes, which seems essential to me.

I am trying to wrap my head around how the library wants me to do this, but documentation seems to be scarce. Any insight would be greatly appreciated.

Answer 1

All you describe sounds right to me. Add Viewport to the RootPanel, create your custom components as a subclass of LayoutContainer etc.

If you use the GXT Composite instead of extending LayoutContainer you may run into trouble as the container may have trouble working out the capabilities of your custom component but LayoutContainer should be fine.

How are you adding your toolbars etc. Are you adding them to your extended LayoutContainer? If so you might be better off extending LayoutContainers subclass ContentPanel instead. ContentPanel has build in place holders suitable for Toolbars e.g. use ContentPanel.setTopComponent(toolbar).

Answer 2

RowLayout with RowData(double width, double height) allows dynamically resizable layouts.

Values less than or equal to 1 are treated as percentages. Values greater than one are treated as pixels. You can also use a -1 to use the component's computed height.

I create resizable windows that have TabPanels and other components using RowLayout. Sometimes hiding / showing components dynamically can cause layout issues, so you need to add listeners that call layout() on the parent container.