swat/apps/qooxdoo-examples/test/GridLayout_11.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/qx.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="demoDescription">
  15     <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>
  16   </div>
  17
  18   <script type="text/javascript">
  19   qx.core.Init.getInstance().defineMain(function()
  20   {
  21     var img = new qx.ui.basic.Image("./image/grid_dialog_box.png");
  22
  23     img.setLocation(20, 48);
  24
  25     var gl = new qx.ui.layout.GridLayout;
  26
  27     gl.setLocation(46, 300);
  28     gl.auto();
  29     gl.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
  30     gl.setPadding(4);
  31
  32     gl.setRowCount(4);
  33     gl.setColumnCount(5);
  34
  35     gl.setHorizontalSpacing(4);
  36     gl.setVerticalSpacing(4);
  37
  38     gl.setColumnWidth(0, 40);
  39     gl.setColumnWidth(1, 35);
  40     gl.setColumnWidth(2, 75);
  41     gl.setColumnWidth(3, 75);
  42     gl.setColumnWidth(4, 75);
  43
  44     gl.setRowHeight(0, 30);
  45     gl.setRowHeight(1, 30);
  46     gl.setRowHeight(2, 15);
  47     gl.setRowHeight(3, 25);
  48
  49     gl.mergeCells(1, 0, 4, 1);
  50     gl.mergeCells(1, 1, 4, 1);
  51
  52     gl.setRowVerticalAlignment(1, "middle");
  53
  54     qx.ui.core.ClientDocument.getInstance().add(img, gl);
  55
  56
  57
  58
  59
  60     var i1 = new qx.ui.basic.Image("icon/32/appearance.png");
  61     gl.add(i1, 0, 0);
  62
  63     var t1 = new qx.ui.basic.Label("Open:");
  64     t1.setMnemonic("O");
  65     t1.setSelectable(false);
  66     gl.add(t1, 0, 1);
  67
  68     var b1 = new qx.ui.form.Button("OK");
  69     b1.setAllowStretchX(true);
  70     gl.add(b1, 2, 3);
  71
  72     var b2 = new qx.ui.form.Button("Cancel");
  73     b2.setAllowStretchX(true);
  74     gl.add(b2, 3, 3);
  75
  76     var b3 = new qx.ui.form.Button("Browse...");
  77     b3.setAllowStretchX(true);
  78     b3.getLabelObject().setMnemonic("B");
  79     gl.add(b3, 4, 3);
  80
  81     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.");
  82     t2.setSelectable(false);
  83     t2.setStyleProperty("whiteSpace", "normal");
  84     gl.add(t2, 1, 0);
  85
  86     var c1 = new qx.ui.form.ComboBox();
  87     c1.setEditable(true);
  88     c1.setValue("d:\\local\\pictures");
  89     c1.setWidth(null);
  90     gl.add(c1, 1, 1);
  91
  92
  93
  94
  95
  96
  97
  98
  99
 100     var c1 = new qx.ui.form.Button("Make bigger");
 101     var c2 = new qx.ui.form.Button("Make smaller");
 102
 103     c1.setLocation(500, 300);
 104     c2.setLocation(500, 330);
 105
 106     qx.ui.core.ClientDocument.getInstance().add(c1, c2);
 107
 108     c1.addEventListener("execute", function(e) {
 109       gl.setColumnWidth(2, 100);
 110       gl.setColumnWidth(3, 100);
 111       gl.setColumnWidth(4, 100);
 112     });
 113
 114     c2.addEventListener("execute", function(e) {
 115       gl.setColumnWidth(2, 75);
 116       gl.setColumnWidth(3, 75);
 117       gl.setColumnWidth(4, 75);
 118     });
 119
 120   });
 121   </script>
 122
 123 </body>
 124 </html>