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 - (string) sets the alignment of content inside a cell
collapsable - (boolean) defines whether a cell can be collapsed
collapsed - (boolean) defines whether a cell is collapsed
css - (string) the name of a CSS class applied to a cell
gravity - (boolean) arranges content evenly throughout the cell
header - (string) the text of the header of a cell
headerHeight - (number) sets the height of a Layout cell
headerIcon - (string) an icon used in the header of a cell
headerImage - (string) an image used in the header of a cell
height - (string|number) sets the height of a cell
hidden - (boolean) defines whether a cell is hidden
html - (string) sets HTML content for a cell
id - (string) the id of a cell
on - (object) adds handlers to DOM events of a cell
padding - (number) defines the distance between a cell and the border of layout
resizable - (boolean) defines whether a cell can be resized
width - (string|number) sets the width of a cell

Layout object

rows - (array) an array of rows objects
cols - (array) an array of columns objects