Documentation

Reference
qx:vbox (qx.ui.layout.VBox)

A vertical box layout.

The vertical box layout lays out widgets in a vertical column, from top to bottom.

Features

  • Minimum and maximum dimensions
  • Priorized growing/shrinking (flex)
  • Margins (with vertical collapsing)
  • Auto sizing (ignoring percent values)
  • Percent heights (not size hint relevant)
  • Alignment (Children property qx.ui.core.LayoutItem#alignY is ignored)
  • Vertical spacing (collapsed with margins)
  • Reversed children layout (starting from last to first)
  • Horizontal 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.
  • height (String): Defines a percent height for the item. The percent height, when specified, is used instead of the height defined by the size hint. The minimum and maximum height 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.VBox();
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 the whole children block. The vertical alignment of the child is completely ignored in VBoxes ( qx.ui.core.LayoutItem#alignY).

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

Horizontal alignment of each child. Can be overridden through qx.ui.core.LayoutItem#alignX.

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

Vertical 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.VBox',
                               u'constructor-args': u'spacing,alignY,separator'}},
    u'extends': [u'qx:vbox', 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