Grid Layout

layut: { type: 'grid' }

Demo

<div id="grid-layout-container" style="height:460px"></div>

<script type="text/javascript">
var w = new ludo.FramedView({
    renderTo:'#grid-layout-container',
    title:'Grid layout',
    width:400,height:400,
    layout:{
        type:'grid',
        columns:3,
        rows:3,
        padX:5,padY:5
    },
    css:{
        margin:5
    },
    children:[
        { type:'FramedView', title: 'Child 1', html:'layout:{ colspan:2, x:0, y:0 }', layout:{ colspan:2, x:0, y:0 } },
        { type:'FramedView', title: 'Child 2', html:'layout: { x: 2, y: 0}', layout: { x: 2, y: 0} },
        { type:'FramedView', title: 'Child 3', html:' layout: { x: 0, y: 1}', layout: { x: 0, y: 1, colspan:2} },
        { type:'FramedView', title: 'Child 4', html:'layout: { x: 1, y: 2} ', layout: { x: 1, y: 2} },
        { type:'FramedView', title: 'Child 5', html:'layout: { x: 0, y: 2}', layout: { x: 0, y: 2} },
        { type:'FramedView', title: 'Child 6', html:'layout: { x: 1, y: 2}', layout: { x: 2, y: 1, rowspan:2} }
    ]
});
</script>

The layout.Grid renders children in a grid. It is similar to the Table Layout but a bit simpler.

When you create the layout, you set type to "grid" and specifies number of columns and rows:

layout:{
    type:'grid',
    columns: 3,
    rows: 3
}

The grid layout will then create a grid coordinate system where all the columns has equal width and all columns has equals height.

Where to render child views within this coordinate system is specified using the x and y attributes for each child view.

children:[
    {
        x:1,y:0 // First row, second column.
    }

]

Colspan and Rowspan

A child view may also span more than one row or column. This is done using the colspan and rowspan attributes.

children:[
    {
        x:1,y:0, // First row, second column.
        colspan:2, // span 2 columns
        rowspan:2 // span 2 rows
    }

]

colspan and rowspan are optional. If not set, a default value of 1 will be used.

Spacing between child views.

Horizontal and Vertical spacing between the child views can be added with the padX and padY attributes. This attribute is set on the parent's layout object.

Example:

layut: { type: 'grid', columns:3, rows:3, padX:10, padY: 5 }

which gives you 10 pixels horizontal spacing between the child views, and 5 pixels vertical spacing.