Setting cells autosize

hor: ver:
</> Source
<!DOCTYPE html>
<html>
<head>
	<title>Setting cells autosize</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>
		#winVP {
			position: relative;
			margin: 20px;
			height: 500px;
			border: 1px solid #c0c0c0;
		}
		#srcAS, #srcDiv0, #srcDiv1, #srcDiv2 {
			position: relative;
			margin-left: 10px;
			padding-top: 10px;
			clear: both;
		}
		.view_descr {
			float: left;
			margin: 2px;
		}
		.view_descr.view_selected .view_name {
			background-color: #bee7fa;
		}
		.view_name {
			position: relative;
			font-family: Tahoma;
			font-size: 14px;
			padding: 2px 1px;
			margin-bottom: 2px;
		}
		.view_img {
			width: 49px;
			height: 49px;
			cursor: pointer;
		}

	</style>
	<script>

		var dhxWins;
		var myLayout;
		var viewsList;
		var lastSelected;

		function loadView(view) {

			if (lastSelected == view) return;

			if (!dhxWins) {
				dhxWins = new dhtmlXWindows();
				dhxWins.attachViewportTo("winVP");
				dhxWins.createWindow("w1", 20, 30, 600, 400);
				dhxWins.window("w1").button("close").disable();
			} else {
				dhxWins.window("w1").detachObject(true);
				myLayout = null;
			}


			myLayout = dhxWins.window("w1").attachLayout(view);

			if (!viewsList) {

				viewsList = myLayout.listPatterns();
				var p = 1;
				var pId = "srcDiv0";
				for (var q=0; q<viewsList.length; q++) {
					var k = document.createElement("DIV");
					k.className = "view_descr";
					k.id = "v_"+viewsList[q];
					k.innerHTML = "<div class='view_name'>"+viewsList[q]+"</div>"+
							"<img class='view_img' border='0' src='../common/imgs/"+String(viewsList[q]).toLowerCase()+".bmp'>";

					k._view = viewsList[q];

					var r = viewsList[q].charAt(0);
					if (p != r) {
						if (r == "4") pId = "srcDiv1";
						if (r == "5") pId = "srcDiv2";
						if (document.getElementById(pId).childNodes.length > 0) k.style.marginLeft = "20px";
					}
					p = r;

					document.getElementById(pId).appendChild(k);
					k.onclick = function(){loadView(this._view);}
					k = null;
				}
			}
			if (lastSelected != null) document.getElementById("v_"+lastSelected).className = "view_descr";
			lastSelected = view;
			document.getElementById("v_"+lastSelected).className = "view_descr view_selected";

			var t = myLayout.listAutoSizes();

			var s1 = document.getElementById("as_hor");
			while (s1.options.length > 0) s1.options.remove(0);
			s1.options.length = 0;

			for (var q=0; q<t[2].length; q++) {
				s1.options.add(new Option(t[2][q],t[2][q]));
				if (t[0] == t[2][q]) s1.options[s1.options.length-1].selected = true;
			}

			var s2 = document.getElementById("as_ver");
			while (s2.options.length > 0) s2.options.remove(0);
			s2.options.length = 0;

			for (var q=0; q<t[3].length; q++) {
				s2.options.add(new Option(t[3][q],t[3][q]));
				if (t[1] == t[3][q]) s2.options[s2.options.length-1].selected = true;
			}

		}

		function setAutoSize() {
			var s1 = document.getElementById("as_hor");
			var s2 = document.getElementById("as_ver");

			myLayout.setAutoSize(s1.options[s1.selectedIndex].value, s2.options[s2.selectedIndex].value);

		}

	</script>
</head>
<body onload="loadView('3L');">
	<div id="winVP"></div>
	<div id="srcAS">
		hor: <select id="as_hor"></select>
		ver: <select id="as_ver"></select>
		<input type="button" value="set" onclick="setAutoSize();">
	</div>
	<div id="srcDiv0"></div>
	<div id="srcDiv1"></div>
	<div id="srcDiv2"></div>
</body>
</html>
Documentation

Check documentation to learn how to use the components and easily implement them in your applications.