Initializing Layout on a Page

Layout Source Files

To start working with dhtmlxLayout, you need to include layout js/css files on a page.

In order to use dhtmlxLayout as a separate component, you need to include its source files on the page. There are two of them:

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

If you use dhtmlxLayout as a part of "dhtmlxSuite" package, you need to have 2 files included:

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

dhtmlxlayout.js/.css files are part of dhtmlx.js/.css, so there is no need to include them separately.

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="https://cdn.dhtmlx.com/edge/dhtmlx.css" 
    type="text/css"> 
<script src="https://cdn.dhtmlx.com/edge/dhtmlx.js" 
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="https://cdn.dhtmlx.com/5.0/dhtmlx.css" 
    type="text/css"> 
<script src="https://cdn.dhtmlx.com/5.0/dhtmlx.js" 
    type="text/javascript"></script>

Constructor

After you've included the necessary source files, you can initialize Layout object.

var myLayout = new dhtmlXLayoutObject({
 
    parent:     "layoutObj",    // id/object, parent container for layout
    pattern:    "3L",           // string, layout's pattern
    skin:       "dhx_skyblue",  // optional,"dhx_skyblue"/"dhx_web"/"dhx_terrace"
 
    offsets: {          // optional, offsets for fullscreen init
        top:    10,     // you can specify all four sides
        right:  10,     // or only the side where you want to have an offset
        bottom: 10,
        left:   10
    },
 
    cells: [    // optional, cells configuration according to the pattern
                // you can specify only the cells you want to configure
                // all params are optional
        {
            id:             "a",        // id of the cell you want to configure
            text:           "Text",     // header text
            collapsed_text: "Text 2",   // header text for a collapsed cell
            header:         false,      // hide header on init
            width:          100,        // cell init width
            height:         100,        // cell init height
            collapse:       true        // collapse on init
            fix_size:       [true,null] // fix cell's size, [width,height]
        },
        {}, // other cell if any
        ...
    ]
});
 
// old way
var myLayout = new dhtmlXLayoutObject(parentId, pattern, skin);
 
// where:
parentId    // id/object, parent container where the layout will be located
pattern     // string, layout's pattern
skin        // string, optional, "dhx_skyblue", "dhx_web", "dhx_terrace"

Full-screen Initialization

Generally, to create a full-screen layout on the page, use the code as in:

<html>
<head>
<style>
    /* it's important to set width/height to 100% for full-screen init */
    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        overflow: hidden;
    }
</style> <script>
    var myLayout;
    function doOnLoad() {
        myLayout = new dhtmlXLayoutObject({
            parent: document.body,  // parent container
            pattern: "3E"           // layout's pattern
        });
    }
</script> </head> <body onload="doOnLoad();">   </body> </html>

It's also possible to set offsets for Layout in the full screen mode.

Initialization in HTML Element

To initialize dhtmlxLayout in an HTML element, do the following:

1) create an HTML element where the layout will be placed later, don't forget to specify its width and height:

<div id="layoutObj" style="position: relative; width: 600px; height: 400px;"></div>

The height and width of the container can't be set in percentage, they are specified in pixels only.

2) create a dhtmlXLayoutObject object and place it into the HTML object that you've just created:

var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",    // id or object for parent container
    pattern: "3L",          // layout's pattern
    skin: "dhx_skyblue"     // optional, layout's skin
});
//or
var myLayout = new dhtmlXLayoutObject({
    parent: document.getElementById("layoutObj"),
    pattern: "3L"
});
// the old way still works
var myLayout = new dhtmlXLayoutObject("layoutObj", "3L", "dhx_skyblue");

Initialization in Window

To create a layout in a window, do the following:

1) create a dhtmlxWindows object:

var dhxWins = new dhtmlXWindows();
var layoutWin = dhxWins.createWindow("w1", 20, 20, 600, 400);

The following parameters are passed to dhxWins.createWindow():

  • w1 - the id of the window;
  • 20, 20 - the left and the top positions of the window;
  • 600, 400 - the width and the height of the window.

2) call the attachLayout method to render a layout in the window:

var myLayout = new layoutWin.attachLayout("3L");
// or using a more extended config
var myLayout = new layoutWin.attachLayout({
    pattern: "3L",
    cells: [...]
});

Initialization in Layout Cell

This way allows you to build any page structure and create a complex layout. To create a new layout in a cell of the existing one, do the following:

1) create a dhtmlXLayoutObject object:

var layout1 = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "3L"
});

2) attach it to a cell of the other layout by means of the attachLayout method:

var layout2 = layout1.cells("a").attachLayout("3E");
// or using more extended config
var layout2 = new layout1.attachLayout({
    pattern: "3L",
    cells: [...]
});

Recommended Way of Initialization

<html>
<head>
<script>
    var myLayout;
    function doOnLoad() {
        myLayout = new dhtmlXLayoutObject({
            // config here
        });
    }
</script> </head> <body onload="doOnLoad();">   </body> </html>
Back to top