swat/apps/qooxdoo-examples/test/GridLayout_5.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>A simple form using qx.ui.layout.GridLayout</p>
  16   </div>
  17
  18   <script type="text/javascript">
  19   qx.core.Init.getInstance().defineMain(function()
  20   {
  21     var gl = new qx.ui.layout.GridLayout;
  22
  23     gl.setLocation(20, 48);
  24     gl.setDimension("auto", "auto");
  25     gl.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
  26     gl.setPadding(8);
  27     gl.setColumnCount(2);
  28     gl.setRowCount(7);
  29     gl.setVerticalSpacing(4);
  30     gl.setHorizontalSpacing(6);
  31
  32     gl.setColumnWidth(0, 70);
  33     gl.setColumnWidth(1, 180);
  34
  35     gl.setColumnHorizontalAlignment(0, "right");
  36     gl.setColumnVerticalAlignment(0, "middle");
  37
  38     gl.setRowHeight(0, 20);
  39     gl.setRowHeight(1, 20);
  40     gl.setRowHeight(2, 20);
  41     gl.setRowHeight(3, 20);
  42     gl.setRowHeight(4, 20);
  43     gl.setRowHeight(5, 70);
  44     gl.setRowHeight(6, 20);
  45
  46     qx.ui.core.ClientDocument.getInstance().add(gl);
  47
  48     var label1 = new qx.ui.basic.Label("Given Name");
  49     var label2 = new qx.ui.basic.Label("Name");
  50     var label3 = new qx.ui.basic.Label("City");
  51     var label4 = new qx.ui.basic.Label("Country");
  52     var label5 = new qx.ui.basic.Label("E-Mail");
  53     var label6 = new qx.ui.basic.Label("Comment");
  54     label6.setVerticalAlign("top");
  55
  56     label6.setVerticalAlign("top");
  57
  58     var input1 = new qx.ui.form.TextField;
  59     var input2 = new qx.ui.form.TextField;
  60     var input3 = new qx.ui.form.TextField;
  61     var input4 = new qx.ui.form.TextField;
  62     var input5 = new qx.ui.form.TextField;
  63     var input6 = new qx.ui.form.TextArea;
  64     var input7 = new qx.ui.form.Button("Submit", "icon/16/apply.png");
  65
  66     input7.setHorizontalAlign("right");
  67
  68     gl.add(label1, 0, 0);
  69     gl.add(input1, 1, 0);
  70     gl.add(label2, 0, 1);
  71     gl.add(input2, 1, 1);
  72     gl.add(label3, 0, 2);
  73     gl.add(input3, 1, 2);
  74     gl.add(label4, 0, 3);
  75     gl.add(input4, 1, 3);
  76     gl.add(label5, 0, 4);
  77     gl.add(input5, 1, 4);
  78     gl.add(label6, 0, 5);
  79     gl.add(input6, 1, 5);
  80     gl.add(input7, 1, 6);
  81   });
  82   </script>
  83
  84 </body>
  85 </html>