<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>qooxdoo » Demo</title> <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> <!--[if IE]> <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> <![endif]--> <script type="text/javascript" src="../../script/qx.js"></script> </head> <body> <script type="text/javascript" src="../../script/layout.js"></script> <div id="demoDescription"> <p>Layout Manager: qx.ui.layout.GridLayout. Example image borrowed from <a href="http://winfx.msdn.microsoft.com/library/en-us/wcp_conceptual/winfx/layout/overviews/grid_ovw.asp">Microsoft's XAML Documentation</a>.</p> </div> <script type="text/javascript"> qx.core.Init.getInstance().defineMain(function() { var img = new qx.ui.basic.Image("./image/grid_dialog_box.png"); img.setLocation(20, 48); var gl = new qx.ui.layout.GridLayout; gl.setLocation(46, 300); gl.auto(); gl.setBorder(qx.renderer.border.BorderPresets.getInstance().outset); gl.setPadding(4); gl.setRowCount(4); gl.setColumnCount(5); gl.setHorizontalSpacing(4); gl.setVerticalSpacing(4); gl.setColumnWidth(0, 40); gl.setColumnWidth(1, 35); gl.setColumnWidth(2, 75); gl.setColumnWidth(3, 75); gl.setColumnWidth(4, 75); gl.setRowHeight(0, 30); gl.setRowHeight(1, 30); gl.setRowHeight(2, 15); gl.setRowHeight(3, 25); gl.mergeCells(1, 0, 4, 1); gl.mergeCells(1, 1, 4, 1); gl.setRowVerticalAlignment(1, "middle"); qx.ui.core.ClientDocument.getInstance().add(img, gl); var i1 = new qx.ui.basic.Image("icon/32/appearance.png"); gl.add(i1, 0, 0); var t1 = new qx.ui.basic.Label("Open:"); t1.setMnemonic("O"); t1.setSelectable(false); gl.add(t1, 0, 1); var b1 = new qx.ui.form.Button("OK"); b1.setAllowStretchX(true); gl.add(b1, 2, 3); var b2 = new qx.ui.form.Button("Cancel"); b2.setAllowStretchX(true); gl.add(b2, 3, 3); var b3 = new qx.ui.form.Button("Browse..."); b3.setAllowStretchX(true); b3.getLabelObject().setMnemonic("B"); gl.add(b3, 4, 3); var t2 = new qx.ui.basic.Label("Type in the name of a program, folder, document or Internet Resource and Windows will open it for you."); t2.setSelectable(false); t2.setStyleProperty("whiteSpace", "normal"); gl.add(t2, 1, 0); var c1 = new qx.ui.form.ComboBox(); c1.setEditable(true); c1.setValue("d:\\local\\pictures"); c1.setWidth(null); gl.add(c1, 1, 1); var c1 = new qx.ui.form.Button("Make bigger"); var c2 = new qx.ui.form.Button("Make smaller"); c1.setLocation(500, 300); c2.setLocation(500, 330); qx.ui.core.ClientDocument.getInstance().add(c1, c2); c1.addEventListener("execute", function(e) { gl.setColumnWidth(2, 100); gl.setColumnWidth(3, 100); gl.setColumnWidth(4, 100); }); c2.addEventListener("execute", function(e) { gl.setColumnWidth(2, 75); gl.setColumnWidth(3, 75); gl.setColumnWidth(4, 75); }); }); </script> </body> </html>