Layout is a concept element that doesn't contain anything in itself yet determines the way 'meaningful' components are arranged. It divides the page into rows and columns where all other components are placed.
Layout consists of rows and columns separated from each other by borders (except for a borderless layout). Rows contain an array of view objects arranged horizontally while cols is an array of vertically arranged objects. Border setting and border types are described in the corresponding chapter of the manual.
webix.ui({
container:"layout_div",
id:"mylayout",
type:"space",
rows:[
{...},
{cols:[
{...},
{...}
]}
]
})
When setting layout, you can easily omit the view:"layout" line and start setting rows and cols at once:
webix.ui({
type:"wide",
rows:[
{...}, {...}
]
});
Three-row layout
webix.ui({
container:"layout_div", //corresponds to the ID of the div block
rows:[
{ template:"row 1" }, //here you place any component you like
{ template:"row 2" },
{ template:"row 3" }
]
});
Three-column layout
webix.ui({
container:"layout_div", //corresponds to the ID of the div block
cols:[
{ template:"col 1" }, //here you place any component you like
{ template:"col 2" },
{ template:"col 3" }
]
});
Any row can be divided into columns and any column may contain rows. This is how simple layouts are nested into each other:
webix.ui({
container:"layout_div", //corresponds to the id of the div block
rows:[
{template:"row 1"}, //here you place any component you like
{template:"row 2"},
{ cols:[
{ template:"col 1" },
{ template:"col 2" },
{ template:"col 3" }
]}
]
});
Related sample: Limits on Resizing
With this library you can make draggable border, or so-called, resizer lines between layout rows and columns. The resizer line can be moved in both directions and change the dimensions of the components on both sides of it.
Resizer lines don't actually change the component's size. They only help users adjust the component's visual scheme to their needs.
It's recommended to set minWidth and maxWidth parameters for columns subject to resizing (minHeight and maxHeight for the rows). It prevents them from collapsing as when the minimal width or height value is achieved, the resizer line cannot be moved anymore.
webix.ui({
container:"layout_div",
id:"layout",
rows:[
{...}, //1st row, non-resizable
{...}, //2nd row
{view:"resizer"},
{...}, //3rd row
{view:"resizer"},
{cols:[ //4th row
{ // 1st column
width:150,
minWidth:50,
maxWidth:250
},
{view:"resizer"},
{....}, //2nd column
{....} //3rd column
]}
]
})
Related sample: Layout and Resizer
Responsive layout behavior depending on window/screen size in discussed separately.
Check how to make headers for different components here.
webix.ui({
rows:[
{ view:"template", //optional
template:"Header for Column 1",
type:"header"
},
{...}
]
})