DHTMLX Docs & Samples Explorer

### Layout Patterns

* New patterns, see documentation for details.
(additional js files should be included)
Source

    <link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxlayout.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxlayout_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxlayout.js"></script>
    <!-- more patterns -->
    <script src="../../codebase/patterns/dhtmlxlayout_pattern4e.js"></script>
    <script src="../../codebase/patterns/dhtmlxlayout_pattern4w.js"></script>
    <script src="../../codebase/patterns/dhtmlxlayout_pattern4a.js"></script>
    <script src="../../codebase/patterns/dhtmlxlayout_pattern4j.js"></script>
    <script src="../../codebase/patterns/dhtmlxlayout_pattern4l.js"></script>
    <script src="../../codebase/patterns/dhtmlxlayout_pattern4f.js"></script>
    <script src="../../codebase/patterns/dhtmlxlayout_pattern4c.js"></script>
    <script src="../../codebase/patterns/dhtmlxlayout_pattern5u.js"></script>
    <script src="../../codebase/patterns/dhtmlxlayout_pattern5e.js"></script>
    <script src="../../codebase/patterns/dhtmlxlayout_pattern5w.js"></script>
    <script src="../../codebase/patterns/dhtmlxlayout_pattern6c.js"></script>
    <script src="../../codebase/dhtmlxcontainer.js"></script>

    <div id="parentId" style="position: relative; top: 20px; left: 20px; width: 600px; height: 400px; aborder: #B5CDE4 1px solid;"></div>
    <div id="srcDiv0" style="position: relative; top: 30px; left: 20px; height: 100px;"></div>
    <div style="position: relative; height: 70px; top: 30px;"><font color='#009000'>*</font> New patterns, see documentation for details.<br>(additional js files should be included)</div>
    <div id="srcDiv1" style="position: relative; top: 30px; left: 20px; height: 120px;"></div>
    <script>var dhxLayout,
    layout,
    views,
    j = 0;
    var tds = {};
    function addTable(from, to) {
        var table = document.createElement("TABLE");
        document.getElementById("srcDiv" + (j++)).appendChild(table);
        var tbody = document.createElement("TBODY");
        table.appendChild(tbody);
        var tr1 = document.createElement("TR");
        tbody.appendChild(tr1);
        var tr2 = document.createElement("TR");
        tbody.appendChild(tr2);
        for (var q = from; q < to; q++) {
            var td1 = document.createElement("TD");
            var td2 = document.createElement("TD");
            td1.innerHTML = views[q] + (q >= 16 ? " <font color='#009000'>*</font>": "");
            td2.innerHTML = "<img src='../common/imgs/" + String(views[q]).toLowerCase() + ".bmp' style='height: 49px; width: 49px; cursor: pointer;' onclick='loadView(\"" + views[q] + "\");'>";
            tr1.appendChild(td1);
            tr2.appendChild(td2);
            tds[views[q]] = td1;
        }
    }
    function loadView(view) {
        if (dhxLayout != null)
            dhxLayout.unload();
        dhxLayout = new dhtmlXLayoutObject("parentId", view);
        if (views == null) {
            views = dhxLayout.listViews();
            addTable(0, 16);
            addTable(16, views.length);
        }
        if (tds[layout])
            tds[layout].style.background = "none";
        layout = view;
        if (tds[layout])
            tds[layout].style.backgroundColor = "#BEE7FA";
    }</script>