You can use dhtmlxLayout to build the necessary composition of blocks to arrange parts of your application. There are three common types of layout:
This type of layout contains several rows of cells which are placed horizontally.
var layout = new dhx.Layout("layout_container", {
rows: [
{ header: "The header of the row 1" },
{ header: "The header of the row 2" },
{ header: "The header of the row 3" },
{ header: "The header of the row 4" }
]
});
This type of layout includes a set of columns of cells that are located vertically.
var layout = new dhx.Layout("layout_container", {
cols: [
{ header: "The header of the column 1" },
{ header: "The header of the column 2" },
{ header: "The header of the column 3" },
{ header: "The header of the column 4" }
]
});
In this layout type both rows and columns are used, i.e. a row may include several columns and a column may have rows inside.
var layout = new dhx.Layout("layout_container", {
rows: [
{
cols: [
{
header: "Block 1"
},
{
header: "Block 2"
}
]
},
{
rows: [
{
header: "Block 3"
},
{
header: "Block 4"
}
]
}
]
});
A layout cell can have any HTML content inside it. You can set it with the html attribute in the object of a cell.
var layout = new dhx.Layout("layout_container", {
cols: [
{ header: "Cell header", html: "Hello world"}
]
});
Related sample: Layout. Html Content
It is possible to add the hidden attribute into the the object of a cell(s) to render a layout with some cells hidden:
var layout = new dhx.Layout("layout_container", {
cols: [
{ header: "Cell header", hidden:true}
]
});
Each layout cell can have a header with some text that describes the content of this cell.
var layout = new dhx.Layout("layout_container", {
cols: [
{ header: "Perfect cell header"}
]
});
You can also add an icon or an image into the header of a cell with the help of corresponding attributes - headerIcon and headerImage.
var layout = new dhx.Layout("layout_container", {
cols: [
{ header: "Cell header", headerIcon:"/icon.png"}
]
});
// or
var layout = new dhx.Layout("layout_container", {
cols: [
{ header: "Cell header", headerImage:"/img.png"}
]
});
Related sample: Layout. Header
You can specify the necessary height of cell with a header using the headerHeight configuration option of a cell:
var layout = new dhx.Layout("layout", {
rows: [
{
id: "row1"
},
{
id: "row2",
header: "Row 2",
headerHeight: 80
}
]
});
Related sample: Layout. Header
If the header property is not set in the config of a cell, the headerHeight option will add a header without text for a cell.
You can easily control and change the size of a cell via the width and height attributes of the object of a cell.
var layout = new dhx.Layout("layout_container", {
rows: [
{
cols: [
{
header: "Block 1",
width: "40%"
},
{
header: "Block 2",
width: "60%"
}
]
},
{
rows: [
{
header: "Block 3",
height: "200px"
},
{
header: "Block 4",
height: "300px"
}
]
}
]
});
There are two attributes of the object of a cell: collapsable and collapsed. The first one defines whether a cell can be collapsed and expanded, and the second one checks whether a cell is collapsed during the initialization of a layout.
var layout = new dhx.Layout("layout_container", {
cols: [
{ header: "Cell header", collapsable:true, collapsed:false}
]
});
Related sample: Layout. Collapsable
Related sample: Layout. Accordion
To allow resizing of a cell, make use of the resizable option in the object of a cell.
var layout = new dhx.Layout("layout_container", {
cols: [
{ header: "Cell header", resizable:true}
]
});
Related sample: Layout. Resizable
Back to top