When layout.type is set to "table", children will be arranged in a table layout.
For demo, see Table layout demo.
Parameters:
| Name |
Type |
Description |
config |
Object
|
Properties
| Name |
Type |
Description |
columns |
Object
|
Column configuration for the table layout. These layout options are added to the parent View.
Properties
| Name |
Type |
Description |
width |
Number
|
Optional width of column |
weight |
Number
|
Optional width weight of columns. "weight" means use remaining space.
In a view where width is 400, and you have three columns, one with fixed with of 100,
one with weight of 1 and one width weight of 2, the first column will use get its fixed with of 100.
The second one will get a width of 100(300(remaining width) 1(weight) / 3(total weight)) and last column a width of 200
(300(remaining width) 2(weight) / 3(total weight)) |
|
row |
Number
|
true to create a new row. (Option for child layout) |
vAlign |
Number
|
Optional Vertical alignment of View(top|middle|bottom|baseline). Default: "top"(Option for child layout) |
simple |
Number
|
true when there are no colspan or rowspan. When this option is true, you don't need to set row:true to specify new rows. |
|
- Source:
-
Example
var w = new ludo.Window({
title: 'Table layout',
layout: {
// position and size of this window
left: 20, top: 20,width: 600, height: 600,
// render children in a table layout
type: 'table',
// Define columns, weight means use remaining space
columns: [
{width: 100}, {width: 200}, {weight: 1}
]
},
css: {
border: 0
},
children: [
{html: 'First row 1 '},
{html: 'First row 2 '},
// Table picker below spans 3 rows
{
type: 'calendar.TimePicker',
layout: {
height: 200,
weight:1,
rowspan: 3
}
},
// Place the cell below in a new row
{html: 'Second row 1 ', layout: {row: true, vAlign : 'top' }},
{html: 'Second row 2 '},
{html: 'Third row 1 ', layout: {row: true, colspan : 2}}
]
});
