Initialization

To add dhtmlxLayout into an application, you need to take the following simple steps:

Download the Layout package and unpack it into a folder of your project
Include source files
Create a container
Define Layout structure
Initialize Layout with the object constructor

<!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>

Include source files

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:

suite.js
suite.css

<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">

Create a container

Add a container for the Layout and give it an id, e.g. "layout_container":

<div id="layout_container"></div>

Define Layout structure

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

Initialize Layout with the dhx.Layout object constructor. The constructor takes two parameters:

the HTML object on the page that serves as the layout container
a configuration object which (besides config options listed below) contains the structure of Layout

var layout = new dhx.Layout("layout_container", {cols});

Configuration properties:

Cell object

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

Layout object

rows	an array of rows objects
cols	an array of columns objects