Documentation

Reference
qx:hbox (qx.ui.layout.HBox)

A horizontal box layout.

The horizontal box layout lays out widgets in a horizontal row, from left to right.

Features

  • Minimum and maximum dimensions
  • Priorized growing/shrinking (flex)
  • Margins (with horizontal collapsing)
  • Auto sizing (ignoring percent values)
  • Percent widths (not size hint relevant)
  • Alignment (Children property qx.ui.core.LayoutItem#alignX is ignored)
  • Horizontal spacing (collapsed with margins)
  • Reversed children layout (starting from last to first)
  • Vertical children stretching (respecting size hints)

Item Properties

  • flex (Integer): Indicates the flexibility of the item, which indicates how an item's container distributes remaining empty space among its children. Flexible elements grow and shrink to fit their given space. Elements with larger flex values will be made larger than elements with lower flex values, at the ratio determined by the two elements. The actual value is not relevant unless there are other flexible elements within the same container. Once the default sizes of elements in a box are calculated, the remaining space in the box is divided among the flexible elements, according to their flex ratios. Specifying a flex value of 0 has the same effect as leaving the flex attribute out entirely.
  • width (String): Defines a percent width for the item. The percent width, when specified, is used instead of the width defined by the size hint. The minimum and maximum width still takes care of the elements limitations. It has no influence on the layout's size hint. Percents are mainly useful for widgets which are sized by the outer hierarchy.

Example

Here is a little example of how to use the grid layout.

var layout = new qx.ui.layout.HBox();
layout.setSpacing(4); // apply spacing

var container = new qx.ui.container.Composite(layout);

container.add(new qx.ui.core.Widget());
container.add(new qx.ui.core.Widget());
container.add(new qx.ui.core.Widget());

External Documentation

Extended documentation and links to demos of this layout in the qooxdoo wiki.

Copyright Notes

Description of flex property by Mozilla licensed under the CC Attribution-Sharealike License.

separator

Separator lines to use between the objects

Default value: Possible values:
alignY

Vertical alignment of each child. Can be overridden through qx.ui.core.LayoutItem#alignY.

Default value: "top" Possible values: "top","middle","bottom","baseline"
alignX

Horizontal alignment of the whole children block. The horizontal alignment of the child is completely ignored in HBoxes ( qx.ui.core.LayoutItem#alignX).

Default value: "left" Possible values: "left","center","right"
spacing

Horizontal spacing between two children

Default value: 0 Possible values:
reversed

Whether the actual children list should be layouted in reversed order.

Default value: false Possible values: 

{   u'add': {   u'*': u'add/defaultWithPosition.mako',
                u'groupBox': u'add/setLayout.mako',
                u'layout': u'add/noParent.mako',
                u'qx:application': u'add/qx/application.mako',
                u'qx:page': u'add/setLayout.mako',
                u'qx:slideBar': u'add/setLayout.mako',
                u'qx:split': u'add/qx/split.mako',
                u'qx:window': u'add/setLayout.mako',
                u'qxt:variant': u'add/noParent.mako'},
    u'attributes': {u'*': u'attr/default.mako', u'id': u'', u'qxt:*': u''},
    u'body': {   u'*': u'body/qx/widget.mako',
                 u'qxt:component': u'body/qxt/component_root.mako'},
    u'data': {   u'attr': {},
                 u'props': {   u'class': u'qx.ui.layout.HBox',
                               u'constructor-args': u'spacing,alignX,separator'}},
    u'extends': [u'qx:hbox', u'layout', u'qx:widget', u'base']}

LGPL, EPL © 2008 QxTransformer | Siarhei Barysiuk & Christian Boulanger.
Site design and illustrations by Siarhei Barysiuk. | Icons by Dry Icons.

qooxdoo