Initializing dhtmlxLayout
There are three ways of initializing dhtmlxLayout:
- Object-based initialization - in this case an object on page acts as Layout's container (parent);
- Window-based initialization - initialization of this kind means that a window (member of dhtmlxWindows system) is made Layout's parent;
- Fullscreen initialization - this third type of initialization presupposes that Layout's parent is “document.body” itself. In this case the Layout takes up the entire page;
- Layout's cell-based initialization - this one more type of initialization creates a Layout parent of which is some cell of another dhtmlxLayout. This newly created Layout will be placed in another layout's cell.
The first things that need to be done for any type of dhtmlxLayout's initialization are the following:
- Download the dhtmlxLayout package from the server and place it in a folder;
- Create an index.html file;
- Place the full paths to dhtmlxLayout's CSS and JS files into the header of html file.
<head>
<script src="[full path to this file]/dhtmlxcommon.js"></script>
<!-- dhtmlxLayout -->
<link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxlayout_dhx_blue.css">
<script src="[full path to this file]/dhtmlxcommon.js"></script>
<script src="[full path to this file]/dhtmlxcontainer.js"></script>
<script src="[full path to this file]/dhtmlxlayout.js"></script>
</head>
Note: dhx_skyblue is the default skin. If the user chooses to apply some other skin, he should indicate path to the appropriate dhtmlxlayout_[name_of_the_skin].css file from dhtmlxLayout package.
If the user works with all available visible space, we recommend him to specify the following style for the <body> tag to make dhtmlxLayout and dhtmlxWindows work correctly:
- width:100%; height:100% - to obtain correct work of fullscreen layout;
- margin:0px - to hide default body space;
- overflow:hidden - to hide body scrolls.
<style> html, body { width: 100%; height: 100%; margin: 0px; overflow: hidden; } </style>
From this point further steps the user should take are different for every kind of initialization.
Object-Based Initialization
We need to create an object where dhtmlxLayout will be placed later. In this example the object is a <div> element on page which is placed in the <body> tag:
<div id="parentId" style="position:absolute; width:600px; height:400px;"></div>
The next step is to create a new dhtmlXLayoutObject and place it after the <div> element (object) that we've just created. The initialization can be done either through objectId (as the first argument):
<script> var dhxLayout = new dhtmlXLayoutObject("parentId", "3L", "dhx_black") </script>
or through object (as the first argument):
<script> var obj = document.getElementById("parentId"); var dhxLayout = new dhtmlXLayoutObject(obj, "3L", "dhx_black"); </script>
The second argument in dhtmlXLayoutObject() is the code of the Layout's pattern.
The third argument is optional, and it indicates the name of the skin chosen for the Layout. If this argument is not indicated, the component will be created with the default skin (dhx_skyblue).
Window-Based Initialization
For this type of initialization, the user needs to create a dhtmlxWindows object:
<script> var dhxWins = new dhtmlXWindows(); var layoutWin = dhxWins.createWindow("w1", 20, 20, 600, 400); </script>
The following parameters should be passed to dhxWins.createWindow():
- “w1” - 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.
Then we get window-based layout by passing a window object into the Layout's constructor. The following line of code should be added to the above mentioned snippet:
var dhxLayout = new dhtmlXLayoutObject(layoutWin, "3L", "dhx_black");
The second argument is the code of the Layout's pattern. The third one is optional, and it indicates the name of the skin chosen for the Layout. If this argument is not indicated, the component will be created with the default skin (dhx_skyblue).
Fullscreen Initialization
The Layout initialized in this way will occupy the whole visible screen area in the browser:
<script> var dhxLayout = new dhtmlXLayoutObject(document.body, "3L", "dhx_black"); </script>
The first argument for dhtmlXLayoutObject() in this case should be “document.body”. The second one - the code of the Layout's pattern. The third argument is optional, and it indicates the name of the skin chosen for the Layout. If this argument is not indicated, the component will be created with the default skin (dhx_skyblue).
Layout's Cell-Based Initialization
This type of initialization means that some Layout's cell will be made parent for the newly created Layout. First, the user needs to create a new dhtmlXLayoutObject, indicate its pattern type and skin (optional):
<script> var dhxLayout = new dhtmlXLayoutObject("parentId", "3L"); </script>
Then another dhtmlXLayoutObject will be created, and it's parent should be indicated either through cells or through items:
<script> var Layout1 = new dhtmlXLayoutObject(dhxLayout.cells("a"), "2U"); // OR var Layout1 = new dhtmlXLayoutObject(dhxLayout.items[1], "2U"); </script>
Refer to Items Accessing section for more information on cells and items.
Recommended Initialization Way
<html> <head> ... <script> var dhxLayout; function doOnLoad() { dhxLayout = new dhtmlXLayoutObject(...); } </script> </head> <body onload="doOnLoad();"> ... </body> </html>
Recommended Full-Screened Initialization Way
<html> <head> ... <style> html, body { width: 100%; height: 100%; margin: 0px; overflow: hidden; } </style> <script> var dhxLayout; function doOnLoad() { dhxLayout = new dhtmlXLayoutObject(...); } </script> </head> <body onload="doOnLoad();"> ... </body> </html>