webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/test/FieldSet_1.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo &raquo; Sample</title>
   5   <link type="text/css" rel="stylesheet" href="../../css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/sample.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="demoDescription">
  15     <p>A more complex example than the previous one. Use layout managers for its content. Configured minWidth of the qx.ui.groupbox.GroupBox with "auto".</p>
  16   </div>
  17
  18   <fieldset style="position:absolute; top:48px; left:400px; width:200px; height:100px"><legend>builtin</legend>content content content content content content content content content content content content content content content</fieldset>
  19
  20
  21   <script type="text/javascript">
  22     qx.core.Init.getInstance().defineMain(function()
  23     {
  24       var d = qx.ui.core.ClientDocument.getInstance();
  25
  26       var fs = new qx.ui.groupbox.GroupBox("My first Fieldset", "icon/16/apps/accessories-clock.png");
  27
  28       with(fs)
  29       {
  30         setWidth("40%");
  31         setBottom(48);
  32         setTop(48);
  33         setLeft(20);
  34
  35         setMaxWidth(350);
  36         setMinWidth("auto");
  37       };
  38
  39       d.add(fs);
  40
  41
  42
  43
  44       var fsl = new qx.ui.layout.VerticalBoxLayout;
  45       fsl.setLeft(0);
  46       fsl.setRight(0);
  47       fsl.setHeight("auto");
  48       fsl.setSpacing(4);
  49       fs.add(fsl);
  50
  51
  52
  53
  54       var r1 = new qx.ui.layout.HorizontalBoxLayout;
  55       r1.setLeft(0);
  56       r1.setWidth("100%");
  57       r1.setHeight("auto");
  58       r1.setVerticalChildrenAlign("middle");
  59       fsl.add(r1);
  60
  61       var a1 = new qx.ui.basic.Atom("TextField 1");
  62       with(a1)
  63       {
  64         setLeft(0);
  65         setWidth("40%");
  66         setHorizontalChildrenAlign("left");
  67       };
  68
  69       var i1 = new qx.ui.form.TextField;
  70       with(i1)
  71       {
  72         setRight(0);
  73         setWidth("60%");
  74       };
  75
  76       r1.add(a1, i1);
  77
  78
  79
  80
  81
  82       var r2 = new qx.ui.layout.HorizontalBoxLayout;
  83       r2.setLeft(0);
  84       r2.setWidth("100%");
  85       r2.setHeight("auto");
  86       r2.setVerticalChildrenAlign("middle");
  87       fsl.add(r2);
  88
  89       var a2 = new qx.ui.basic.Atom("TextField 2", "icon/16/apps/preferences-desktop-theme.png");
  90       with(a2)
  91       {
  92         setLeft(0);
  93         setWidth("40%");
  94         setHorizontalChildrenAlign("left");
  95       };
  96
  97       var i2 = new qx.ui.form.TextField;
  98       with(i2)
  99       {
 100         setRight(0);
 101         setWidth("60%");
 102       };
 103
 104       r2.add(a2, i2);
 105
 106
 107
 108
 109
 110
 111       var r3 = new qx.ui.layout.HorizontalBoxLayout;
 112       r3.setLeft(0);
 113       r3.setWidth("100%");
 114       r3.setHeight("auto");
 115       r3.setVerticalChildrenAlign("middle");
 116       fsl.add(r3);
 117
 118       var a3 = new qx.ui.basic.Atom("TextField 3");
 119       with(a3)
 120       {
 121         setLeft(0);
 122         setWidth("40%");
 123         setHorizontalChildrenAlign("left");
 124       };
 125
 126       var i3 = new qx.ui.form.TextField;
 127       with(i3)
 128       {
 129         setRight(0);
 130         setWidth("60%");
 131       };
 132
 133       r3.add(a3, i3);
 134
 135
 136
 137
 138     });
 139   </script>
 140 </body>
 141 </html>