qooxdoo

Universal JavaScript Framework

 

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.

Preview Image

layout/grid.png

This image show two nested grids with column and row spans.

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

Description

The grid arranges the child widgets in a two dimensional grid. Each child is associated with a grid column and row. Widgets can span multiple cells by setting the colSpan and rowSpan layout properties. However each grid cell can only contain one widget. Thus child widgets can never overlap.

The grid computes the preferred with/height of each column/row based on the preferred size of the child widgets. The computed column widths and row heights can be overridden by explicitly setting them using setColumnWidth and setRowHeight. Minimum and maximum sizes for columns/rows can be set as well.

By default no column or row is stretched if the available space is larger/smaller than the needed space. To allow certain rows/columns to be stretched each row/column can have a flex value.

Layout 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. (defaults to 1)
  • 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. (defaults to 1)

Alternative Names

Demos

Here are some links that demonstrate the usage of the layout:

API

Here is a link to the API of the layout manager:

Table Of Contents

Previous topic

Dock

Next topic

Grow

This Page