Attach windows to cell
</> Source
<!DOCTYPE html>
<html>
<head>
<title>Attach windows to cell</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>
<style>
div#layoutObj {
position: relative;
margin-top: 10px;
margin-left: 10px;
width: 800px;
height: 600px;
}
div#winVP {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<script>
var myLayout;
var dhxWins;
function doOnLoad() {
myLayout = new dhtmlXLayoutObject({
parent: "layoutObj",
pattern: "3L"
});
myLayout.cells("a").setText("Windows");
myLayout.cells("a").attachObject("winVP");
// init windows
dhxWins = new dhtmlXWindows();
// rendering viewport as an existing object on page
// which already attached to layout
dhxWins.attachViewportTo("winVP");
// open windows
dhxWins.createWindow("w1", 10, 10, 300, 190);
dhxWins.createWindow("w2", 30, 65, 300, 190);
dhxWins.createWindow("w3", 50, 120, 300, 190);
// check windows' positions if cell resized
myLayout.attachEvent("onPanelResizeFinish", function(cells){
for (var q=0; q<cells.length; q++) {
if (cells[q] == "a") {
// cell "a" was resized, check windows' positions (out-of-viewport)
dhxWins.forEachWindow(function(win){
win.adjustPosition();
});
}
}
});
}
</script>
</head>
<body onload="doOnLoad();">
<!-- layout's container -->
<div id="layoutObj"></div>
<!-- will used as windows viewport -->
<div id="winVP" style="display: none;"></div>
</body>
</html>
Documentation
Check documentation to learn how to use the components and easily implement them in your applications.