GridLayout
The GridLayout if the element that defines the position of elements in the page.
A GridLayout is an array or a table, that defines cells. Each cell can contain again
an element, which can be a GridLayout itself. Many properties can be defined for this
element : wrapped, fixed, percent sized, position of cells, on top, vertically/horizontally
centered, etc ...
MultiCell Layout
...
var aLayout=new GridLayout(2,2);
aLayout.setProperties(\{
fullscreen: false, // Layout will have parent size
fixed: [50,100] // Fixed width for columns
})
.add(0,0,new ContainerElement(new TextElement("Text 0,0"))) // add element [0,0]
.add(0,1,new ContainerElement(new TextElement("Text 0,1"))) // add element [0,1]
.add(1,0,new ContainerElement(new TextElement("Text 1,0"))) // add element [1,0]
.add(1,1,new ContainerElement(new TextElement("Text 1,1"))) // add element [1,1]
.addColumnProperties(0,\{vertical: 'center',fixed:[50,50]}) // define column 0 property
.addColumnProperties(1,\{vertical: 'center',fixed:[100,50]});// define column 1 property
...
setProperties(properties)
This defines width for each column with even 'fixed' or 'percent' property.
The 'fixed' or 'percent' property can be used to define the width of each column.
If 0 is defined for a column width, the column width will fill the parent size.
To define the layout to fill document size, set 'fullscreen' property to true.
add(x,y,element)
To add a new cell in the layout, use 'add' method, that takes 3 arguments : x,y to set the
position of 'element' in the layout. Cells that are not defined are considered as empty.
addColumnProperties(x,properties)
Set x to the width of the column. You can define properties 'vertical' to align cells vertically
with 'center' or 'top' position. The 'fixed' or 'percent' property can be used to define the
height of each cell. If 0 is defined for a cell height, the cell height will fill the parent size
Wrapping mode
To wrap the layout to inner element size use 'wrap:true' property in width and height properties
definition.