Table Layout

layout: { type: 'table' }

Demo

SAMPLE
CODE

The Table layout is used to render child views inside a table.

Specify column rules

layout.columns is used to define the width of each column.

       layout: {
            type: 'table',
            height:400, width: 400,
            columns: [
                {width: 100}, {width: 100}, {weight: 1}
            ]
        }

Use width to specify a width in pixels or weight to give the column a dynamic width.

In the example below

       layout: {
            type: 'table',
            height:400, width: 400,
            columns: [
                {weight: 1}, {width: 1}, {weight: 2}
            ]
        }

The first and second column column will get a width of 25%. The third column will get a width of 50%.

The code above can also be written like this:

       layout: {
            type: 'table',
            height:400, width: 400,
            columns: [
                {weight: 25}, {width: 25}, {weight: 50 }
            ]
        }

where you can think in the terms of percentage.

When you have columns with a fixed width, the weight is of the remaining width after the fixed widths has been subtracted.

       layout: {
            type: 'table',
            height:400, width: 400, // Total width is 400
            columns: [
                { width: 100 } , {weight: 25}, {width: 25}, {weight: 50 }, { width: 100 } // Two columns with fixed width.
            ]
        }

In the example above, You have two columns with a fixed width of 100. 400-200 gives you 200 pixels to be distributed between the columns with dynamic width(weight).

Colspan and Rowspan

To make a child view span more than one column or row, specify rowspan on the childs layout object.

Example:

SAMPLE
CODE

New Row

Whenever a child view should start at a new row, set row:true on it's layout object

children:[
    {...}
    { layout: { row: true } ...
    ...
]

Vertical alignment

Vertical alignment of child views(top,middle or bottom) is set using the layout.vAlign property.

children:[
    {...}
    { layout: { vAlign: 'middle' } ...
    ...
]

Default vAlign is "top".

Generated 2016-12-02 19:27:13