<link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxlayout_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxWindows/codebase/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css">
<script src="../../codebase/dhtmlxcommon.js"></script>
<script src="../../codebase/dhtmlxlayout.js"></script>
<script src="../../../dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
<script src="../../codebase/dhtmlxcontainer.js"></script>
 
<div id="winVP" style="position: relative; height: 500px; border: #cecece 1px solid; margin: 10px;"> </div>
<div id="srcDiv" style="position: relative; left: 20px; width: 600px;"></div>
<div style="position: relative; margin-top: 20px; left: 20px; width: 600px;">Please, select the cells which will be autosized in the process of resizing</div>
<div id="viewDiv" style="position: relative; margin-top: 20px; left: 20px; width: 600px;">
    Autosize: HOR <select id="sel1"></select> VER <select id="sel2"></select> <input type="button" value="Apply" onclick="setAutoSize();">
</div>
<script>
var dhxWins,
dhxLayout;
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
function doOnLoad() {
    dhxWins = new dhtmlXWindows();
    dhxWins.enableAutoViewport(false);
    dhxWins.attachViewportTo("winVP");
    dhxWins.setImagePath("../../../dhtmlxWindows/codebase/imgs/");
    dhxWins.createWindow("w1", 20, 30, 600, 400);
    loadView("3L");
    var views = dhxLayout.listViews();
    var table = document.createElement("TABLE");
    document.getElementById("srcDiv").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 = 0; q < views.length; q++) {
        var td1 = document.createElement("TD");
        var td2 = document.createElement("TD");
        td1.innerHTML = views[q];
        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);
    }
}
function loadView(view) {
    if (dhxLayout != null)
        dhxLayout.unload();
    dhxLayout = dhxWins.window("w1").attachLayout(view);
    //;
    var asData = dhxLayout.listAutoSizes();
    sel1.options.length = 0;
    var selected = 0;
    for (var q = 0; q < asData[2].length; q++) {
        if (asData[2][q] == asData[0]) {
            selected = q;
        }
        sel1.options.add(new Option(asData[2][q].replace(/;/g, " "), asData[2][q]));
    }
    sel1.selectedIndex = selected;
    sel2.options.length = 0;
    var selected = 0;
    for (var q = 0; q < asData[3].length; q++) {
        if (asData[3][q] == asData[1]) {
            selected = q;
        }
        sel2.options.add(new Option(asData[3][q].replace(/;/g, " "), asData[3][q]));
    }
    sel2.selectedIndex = selected;
}
function setAutoSize() {
    var sel1 = document.getElementById("sel1");
    var as1 = sel1.options[sel1.selectedIndex].value;
    var sel2 = document.getElementById("sel2");
    var as2 = sel2.options[sel2.selectedIndex].value;
    //;
    dhxLayout.setAutoSize(as1, as2);
}</script>