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. Starts on left (or right) and place each widget after (or before) the previous one. 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 childrens. Supports to be auto-sized, too.

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

• width and height (with the following allowed units: pixel, percent, auto and flex (only partly implemented))
• 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 QxBoxLayout which setup the orientation to “horizontal”. For more details take a look at QxBoxLayout. Not really needed as the default orientation of QxBoxLayout is horizontal.

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

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!

• 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 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 QxBoxLayout))
• Vertical Children Alignment (left and right) (works more like a mirroring than a real alignment (as known from QxBoxLayout))
• 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.

... coming soon