(For more resources on ExtGwt, see here.)

Introduction

Layouts are a fundamental part of the GXT library. They provide the ability to create flexible and beautiful application UIs easily. However, with this power comes a level of complexity. A solid understanding of layouts is the key to using the library effectively.

With GWT Panels, the panel itself is responsible for creating the panel’s markup and inserting its children at the appropriate location, and creating appropriate markup as changes are made. Unlike GWT Panels, LayoutContainer (a concrete GXT container with support for layouts) does not physically connect its child components to the container’s DOM. The Document Object Model is used to represent an HTML document in a tree-like structure in the browser’s memory. We can dynamically change the content of the HTML page by manipulating the DOM. Rather, it is the job of the layout to both build the internal structure of the container, and to connect its child widgets.

In order for a GXT container’s HTML to be rendered, the container’s layout() method must execute. This is different from GWT panels, in which the HTML is rendered when the components are attached to the panel. There are several ways in which the layout can execute. For now, let’s go with the simplest case in which the layout executes when the container is attached. Attached is a GWT term that indicates that the widget is part of the browser’s DOM. Attaching and detaching could be a subject on its own, so let’s just assume it means when the widget is added to and removed from the page.

When we add a container to RootPanel (for example, RootPanel.get(). add(container)), the container will be attached, and the container’s layout will execute, generating the needed HTML markup. If we add another component to the now rendered container, (container.add(new Label(“New Item”))) we will have to manually execute/ refresh the container (container.layout()) for the additions (as well as removals) to be effected. This sort of Lazy-Rendering is the default behavior of GXT as of 2.2.3 with GXT 3 planning to use the same approach as GWT itself.

Many GXT layouts can be used in conjunction with LayoutData, which are configuration objects assigned to each child widget within a container, and provides the layout object with additional information to be used when executing the layout.

Aside from a layout being executed when the container is attached, or when layout() is called manually on the container, there are two other ways in which a layout will be executed. After a container executes its layout, it looks and sees if any of its children are containers. When it finds a child container, it then executes its layout. So as long as there is a chain of containers, the execution of layouts will cascade to the child containers. This is a very important concept as you can lay out a top-level container, and the child containers will have a chance to adjust their layouts as well.

A container’s layout will also execute when its size is adjusted. This is default behavior, and can be disabled. This is another important concept as it means that if a container’s size is changed, the layout has a chance to update based on the container’s new size.