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.
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>
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"
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.
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");
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():
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: [...]
});
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: [...]
});
<html>
<head>
<script> var myLayout;
function doOnLoad() {
myLayout = new dhtmlXLayoutObject({
// config here
});
}
</script>
</head>
<body onload="doOnLoad();">
</body>
</html>