Documentation

Reference
qx:grid (qx.ui.layout.Grid)

The grid layout manager arranges the items in a two dimensional grid. Widgets can be placed into the grid’s cells and may span multiple rows and columns.

Features

  • Flex values for rows and columns
  • Minimal and maximal column and row sizes
  • Manually setting of column and row sizes
  • Horizontal and vertical alignment
  • Horizontal and vertical spacing
  • Column and row spans
  • Auto-sizing

Item Properties

  • row (Integer): The row of the cell the widget should occupy. Each cell can only contain one widget. This layout property is mandatory.
  • column (Integer): The column of the cell the widget should occupy. Each cell can only contain one widget. This layout property is mandatory.
  • rowSpan (Integer): The number of rows, the widget should span, starting from the row specified in the row property. The cells in the spanned rows must be empty as well.
  • colSpan (Integer): The number of columns, the widget should span, starting from the column specified in the column property. The cells in the spanned columns must be empty as well.

Example

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

var layout = new qx.ui.layout.Grid();
layout.setRowFlex(0, 1); // make row 0 flexible
layout.setColumnWidth(1, 200); // set with of column 1 to 200 pixel

var container = new qx.ui.container.Composite(layout);
container.add(new qx.ui.core.Widget(), {row: 0, column: 0});
container.add(new qx.ui.core.Widget(), {row: 0, column: 1});
container.add(new qx.ui.core.Widget(), {row: 1, column: 0, rowSpan: 2});

External Documentation

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

The vertical spacing between grid cells.

Default value: 0 Possible values:
spacingX

The horizontal spacing between grid cells.

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.Grid',
                               u'constructor-args': u'spacingX,spacingY'}},
    u'extends': [u'qx:grid', 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