Layout Containers

Each container has its own specific uses, and these uses should be described in that container’s documentation. When looking at any container and its layout features, keep in mind how it sizes and positions its children and what layout data it uses to be more specific.





Containers can be used with the UiBinder.

Container hierarchy

This is a hierarchy of the main containers. More examples exist in the demo.


A base class for HTML layout containers. Provides behavior common to all HTML layout containers, including the attachment of of the widget element to the container’s parent element.


A layout container that manages multiple content panels in an expandable accordion style such that only one panel can be expanded at any given time (by default). Each panel has built-in support for expanding and collapsing. Note: Only ContentPanel’s and subclasses may be used in an accordion layout container. Each content panel should be created with AccordionLayoutContainer.AccordionLayoutAppearance to produce the expected accordion panel look and feel.


A multi-pane, application-oriented layout container that supports multiple regions, automatic split bars between regions and built-in expanding and collapsing of regions.

Region positions are specified using compass points (e.g. north for top, west for left, east for right, south for bottom) and center. The center region is a privileged position that receives the remaining space not allocated to other regions. Border layout containers should generally specify a center region and one or more other regions.

Region layout parameters are specified using BorderLayoutData which controls the margin between the regions, the size of the region, the minimum and maximum size, whether the region has a split bar, whether the region is collapsible and other details.

Region size may be specified as a percent of the parent container size or a fixed number of pixels. The region size is specified as a single value that describes the orientation associated with the region (height for north and south, width for west and east).


A base class for box layout containers. Provides behavior common to all box layout containers, including packing, padding and the action to take on insert and remove.


A horizontal row of buttons.


A group of buttons.


A layout container that contains multiple widgets, each fit to the container, where only a single widget can be visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc.


A layout container that centers its single widget.


Base class for all GXT widgets.


Abstract base for components that can contain child widgets.


ContentPanel is a component container that has specific functionality and structural components that make it the perfect building block for application-oriented user interfaces. A content panel contains separate header, footer and body sections. The header may contain an icon, text and a tool area that can be wired up to provide customized behavior. The footer contains buttons added using addButton(Widget). The body contains a single widget, added using SimpleContainer.add(Widget). The widget is resized to match the size of the container. A content panel provides built-in expandable and collapsible behavior.


A layout container that uses the CSS float style to enable widgets to float around other widgets.


A Window with specialized support for buttons. Defaults to a dialog with an ‘ok’ button.


Form field wrapper to add a label and validation error text.


A simple container that wraps its content in a HTML fieldset.


A flow layout container that supports scrolling and lays out its widgets using the default HTML layout behavior.


A panel that wraps an HTML form. The field names and data on the form can be submitted to an HTTP server. A form panel is a SimpleContainer, which contains only a single widget. Multiple fields can be added to a form panel by adding them first to another container and then adding that container to the form panel.


A ContentPanel that internally uses a @link FramedPanel.FramedPanelAppearance.


A layout container for horizontal rows of widgets. Provides support for automatic overflow.


A layout container that lays out its children in a single row. The layout properties for each child are specified using HorizontalLayoutContainer.HorizontalLayoutData.


A layout container that lays out its children using an HTML template. The mapping of each child to a corresponding selector is specified using HtmlData.


A base class for layout containers that can insert widgets.


A base class for layout containers that can insert widgets and honor the RequiresResize contract.


A layout container that supports north (top) and south (bottom) regions.


A specialized toolbar that is bound to a PagingLoader and provides automatic paging controls.

A panel that can be displayed over other widgets.


A layout container that lays out its children in in multiple columns, each containing zero or more Portlets. Supports drag and drop of child Portlets between columns as well as modifying the order within columns.


A framed panel that is managed by a PortalLayoutContainer.


A base class for layout containers that require resize support.


SimpleContainer takes one child and sizes it to match the container size.


A standard tool bar.


A layout container for vertical columns of widgets.


A layout container that lays out its children in a single column. The lay out properties for each child are specified using VerticalLayoutContainer.VerticalLayoutData.


A LayoutContainer that fills the browser window and monitors window resizing. Viewports are best used for applications that will fill the browser without window scrolling. Children of the viewport can allow scrolling.


Refers to the GWT Widget.


A specialized content panel intended for use as an application window.