DHTMLX Docs & Samples Explorer

Attached to Layout

 
Source
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxtoolbar_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxtoolbar_dhx_web.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxLayout/codebase/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_web.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_web.css">
<script src="../../codebase/dhtmlxcommon.js"></script>
<script src="../../codebase/dhtmlxtoolbar.js"></script>
<script src="../../../dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
<script src="../../../dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
<script src="../../../dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script src="../../../dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script>
var dhxLayout,
dhxGrid,
dhxToolbar;
var dhxLayout2,
dhxGrid2,
dhxToolbar2;
function doOnLoad() {
    dhxLayout = new dhtmlXLayoutObject("parentId", "2U", "dhx_skyblue");
    dhxLayout.cells("a").hideHeader();
    dhxGrid = dhxLayout.cells("a").attachGrid();
    dhxGrid.setImagePath("../../../dhtmlxGrid/codebase/imgs/");
    dhxGrid.loadXML("../common/grid.xml?etc=" + new Date().getTime());
    dhxToolbar = dhxLayout.attachToolbar();
    loadToolbar(18);
    //;
    dhxLayout2 = new dhtmlXLayoutObject("parentId2", "2U", "dhx_web");
    dhxLayout2.cells("a").hideHeader();
    dhxGrid2 = dhxLayout2.cells("a").attachGrid();
    dhxGrid2.setImagePath("../../../dhtmlxGrid/codebase/imgs/");
    dhxGrid2.loadXML("../common/grid.xml?etc=" + new Date().getTime());
    dhxToolbar2 = dhxLayout2.attachToolbar();
    loadToolbar2(18);
}
function loadToolbar(a) {
    dhxToolbar.clearAll();
    dhxToolbar.setIconSize(a);
    dhxToolbar.setIconsPath("../common/icon_size/" + a + "/");
    dhxToolbar.loadXML("../common/dhxtoolbar_button2.xml?" + new Date().getTime());
}
function loadToolbar2(a) {
    dhxToolbar2.clearAll();
    dhxToolbar2.setIconSize(a);
    dhxToolbar2.setIconsPath("../common/icon_size/" + a + "/");
    dhxToolbar2.loadXML("../common/dhxtoolbar_button2.xml?" + new Date().getTime());
}
</script> <table> <tr> <td> <div style="padding-bottom: 10px;"> <input type="button" value="18" onclick="loadToolbar(18);"> <input type="button" value="24" onclick="loadToolbar(24);"> <input type="button" value="32" onclick="loadToolbar(32);"> <input type="button" value="48" onclick="loadToolbar(48);"> </div> <div id="parentId" style="position: relative; width: 600px; height: 400px;"></div> </td> <td width="50">&nbsp;</td> <td> <div style="padding-bottom: 10px;"> <input type="button" value="18" onclick="loadToolbar2(18);"> <input type="button" value="24" onclick="loadToolbar2(24);"> <input type="button" value="32" onclick="loadToolbar2(32);"> <input type="button" value="48" onclick="loadToolbar2(48);"> </div> <div id="parentId2" style="position: relative; width: 600px; height: 400px;"></div> </td> </tr> </table>