A short overview over the currently existing layout managers included with qooxdoo.

Layouts its children by their explicitly configured locations and dimensions. Supports to be auto-sized.

• width, minWidth, maxWidth, height, minHeight, maxHeight (with the following allowed units: pixel, percent and auto)
• top, right, bottom, left (with the following allowed units: pixel and percent)
• marginTop, marginRight, marginBottom, marginLeft (with the following allowed units: pixel)

Layouts its children sequential. It starts on the left (or right) and places each widget after (or before) the previous one. It allows to setup a spacing to create a margin between all the children. Each child could also define a margin to allow customized spacings between single children. Supports to be auto-sized, too.

The great advantage is you don’t need to know in advance the space that each widget needs.

• width and height (with the following allowed units: pixel, percent, auto and flex)
• minWidth, maxWidth, minHeight, maxHeight (with the following allowed units: pixel, percent and auto)
• top, right, bottom, left (with the following allowed units: pixel and percent) (this works relative from the the default position - somewhat like known from a “position:relative” placed node in CSS and has no effect on the previous or following children)
• marginTop, marginRight, marginBottom, marginLeft (with the following allowed units: pixel)

• Horizontal Children Alignment (left, center, right)
• Vertical Children Alignment (top, middle, bottom)
• Orientation (horizontal or vertical)
• Spacing (as a pixel value)
• Reversed Children Order
• Stretching (strech children with no given dimension on the orthogonal axis to the full inner size of the layout)

The predefined version of BoxLayout which setup the orientation to “horizontal”. For more details take a look at BoxLayout. Not really needed as the default orientation of BoxLayout is horizontal.

The predefined version of BoxLayout which setup the orientation to “vertical”. For more details take a look at BoxLayout.

Layouts its children sequential. Starts in the left/top edge (configureable) and flows the children one-after-one. You can define a vertical and a horizontal spacing. Supports to be auto-sized, but currently it only works in simple scenarios. For best results assign it a fixed width and even better a fixed height.

• width, minWidth, maxWidth, height, minHeight, maxHeight (with the following allowed units: pixel, percent and auto)
• top, right, bottom, left (with the following allowed units: pixel and percent) (this works relative from the default position - somewhat like known from a “position:relative” placed node in CSS and has no effect on the previous or following children)
• marginTop, marginRight, marginBottom, marginLeft (with the following allowed units: pixel)

• Horizontal Children Alignment (left and right) (works more like a mirroring than a real alignment (as known from BoxLayout))
• Vertical Children Alignment (left and right) (works more like a mirroring than a real alignment (as known from BoxLayout))
• Horizontal Spacing (as a pixel value)
• Vertical Spacing (as a pixel value)
• Reversed Children Order

Layouts its children sequential. It has different modes: “horizontal”, “vertical” (default) and “ordered”. The selected mode decides about the final layout of the children.

• horizontal: Give priority to the horizontal aligned children. The top and bottom aligned ones get the free space for their width after the left and right ones have been layouted.
• vertical (default): Give priority to the vertical aligned children. The left and right aligned ones get the free space for their height after the top and bottom ones have been layouted.
• ordered: Most advanced mode. The priority is identical to the position of the child inside the internal children array structure: First added childrens have the highest priority, last added the lowest.

Please take a look at the second example. Their you can change this mode property at runtime and see the effect.

• width, minWidth, maxWidth, height, minHeight, maxHeight (with the following allowed units: pixel, percent and auto)
• top, right, bottom, left (with the following allowed units: pixel and percent)
• marginTop, marginRight, marginBottom, marginLeft (with the following allowed units: pixel)

The “mode” property as explained above.

Lays out children to a grid. The cells and rows must be defined. Afterwards you can add each child to a specific cell.

You must specify the row heights and column widths, with pixels or percentages. Doesn’t support currently to be autosized.