To add dhtmlxLayout into an application, you need to take the following simple steps:
<!DOCTYPE html>
<html>
<head>
<title>How to Start with dhtmlxLayout</title>
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">
</head>
<body>
<div id="layout_container"></div>
<script> // creating dhtmlxLayout
var layout = new dhx.Layout("layout_container", {
cols: [
{ header: "Column 1" },
{ header: "Column 2", cols: [
{ header:"Left cols"},
{ header:"Center cols",cols: [
{ header: "Sub Block Header cols 1" },
{ header: "Sub Block Header cols 2" },
{ header: "Sub Block Header cols 3" }
]
}
]
}
]
});
</script>
</body>
</html>
Create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">
Add a container for the Layout and give it an id, e.g. "layout_container":
<div id="layout_container"></div>Layout consists of a set of cells arranged either into rows or into columns. The structure of a layout can be rather complex, since there can also be nested rows and columns.
For example, you can create a three-level layout structure:
var cols = [
{
header: "Sub Block Header row"
},
{
header: "Sub Block Header row",
cols: [
{
header:"Left cols"
},
{
header:"Center cols",
cols: [
{ header: "Sub Block Header cols 1" },
{ header: "Sub Block Header cols 2" },
{ header: "Sub Block Header cols 3" }
]
},
{
header:"Right"
}
]
},
{ header: "Sub Block Header" },
{ header: "Sub Block Header" }
]
Initialize Layout with the dhx.Layout object constructor. The constructor takes two parameters:
var layout = new dhx.Layout("layout_container", {cols});