UNPKG

@qooxdoo/framework

Version:

The JS Framework for Coders

qooxdoo.org

qooxdoo/qooxdoo

63 lines (43 loc) • 2.9 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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 ------------- ![grid.png](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](apps://apiviewer/#qx.ui.layout.Grid~setColumnWidth) and [setRowHeight](apps://apiviewer/#qx.ui.layout.Grid~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 \<pages/ui\_layouting\#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 ----------------- - [QGridLayout](http://qt-project.org/doc/qt-5.0/qtwidgets/qgridlayout.html) (Qt) - Grid (XAML) - TableLayout (ExtJS) Demos ----- Here are some links that demonstrate the usage of the layout: - [Simple grids](apps://demobrowser/#layout~Grid_Simple.html) - [Complex grids](apps://demobrowser/#layout~Grid_Complex.html) - [A grid with different cell alignments](apps://demobrowser/#layout~Grid_Alignment.html) - [An animated grid](apps://demobrowser/#layout~Grid_Animated.html) API --- Here is a link to the API of the layout manager: [qx.ui.layout.Grid](apps://apiviewer/index.html#qx.ui.layout.Grid)