Documentation

Reference
qx:dock (qx.ui.layout.Dock)

Docks children to one of the edges.

Features

  • Percent width for left/right/center attached children
  • Percent height for top/bottom/center attached children
  • Minimum and maximum dimensions
  • Prioritized growing/shrinking (flex)
  • Auto sizing
  • Margins and Spacings
  • Alignment in orthogonal axis (e.g. alignX of north attached)
  • Different sort options for children

Item Properties

  • edge (String): The edge where the layout item should be docked. This may be one of north, east, south, west or center. (Required)
  • 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. This is only supported for children added to the north or south edge or are centered in the middle of the layout. 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.
  • 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. This is only supported for children added to the west or east edge or are centered in the middle of the layout. 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

var layout = new qx.ui.layout.Dock();

var w1 = new qx.ui.core.Widget();
var w2 = new qx.ui.core.Widget();
var w3 = new qx.ui.core.Widget();

w1.setHeight(200);
w2.setWidth(150);

var container = new qx.ui.container.Composite(layout);
container.add(w1, {edge:"north"});
container.add(w2, {edge:"west"});
container.add(w3, {edge:"center"});

Detailed Description

Using this layout, items may be “docked” to a specific side of the available space. Each displayed item reduces the available space for the following children. Priorities depend on the position of the child in the internal children list.

External Documentation

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

The way the widgets should be displayed (in conjunction with their position in the childrens array).

Default value: "auto" Possible values: "auto","y","x"
separatorY

Separator lines to use between the vertical objects

Default value: Possible values:
separatorX

Separator lines to use between the horizontal objects

Default value: Possible values:
connectSeparators

Whether separators should be collapsed so when a spacing is configured the line go over into each other

Default value: false Possible values:
spacingY

Vertical spacing between two children

Default value: 0 Possible values:
spacingX

Horizontal spacing between two children

Default value: 0 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.Dock',
                               u'constructor-args': u'spacingX,spacingY,separatorX,separatorY'}},
    u'extends': [u'qx:dock', 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