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>
Related sample: Layout. Basic Initialization
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});
align | sets the alignment of content inside a cell |
collapsable | defines whether a cell can be collapsed |
collapsed | defines whether a cell is collapsed |
css | the name of a CSS class applied to a cell |
gravity | sets the "weight" of a cell in relation to other cells placed in the same row and within one parent |
header | the text of the header of a cell |
headerHeight | sets the height of a Layout cell |
headerIcon | an icon used in the header of a cell |
headerImage | an image used in the header of a cell |
height | sets the height of a cell |
hidden | defines whether a cell is hidden |
html | sets HTML content for a cell |
id | the id of a cell |
maxHeight | the maximal height to be set for a cell |
maxWidth | the maximal width to be set for a cell |
minHeight | the minimal height to be set for a cell |
minWidth | the minimal width to be set for a cell |
on | adds handlers to DOM events of a cell |
padding | defines the distance between a cell and the border of layout |
resizable | defines whether a cell can be resized |
type | defines the type of borders between cells inside a layout |
width | sets the width of a cell |
rows | an array of rows objects |
cols | an array of columns objects |