webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/GroupBox_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>Introducing qx.ui.groupbox.GroupBox.</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");
  27
  28       with(fs)
  29       {
  30         setWidth("40%");
  31         setBottom(48);
  32         setTop(48);
  33         setLeft(20);
  34
  35         setMaxWidth(350);
  36         setMinWidth(250);
  37       };
  38
  39
  40
  41       var a1 = new qx.ui.basic.Atom("TextField 1");
  42       with(a1)
  43       {
  44         setTop(3);
  45         setLeft(0);
  46         setWidth("35%");
  47         setHorizontalChildrenAlign("left");
  48       };
  49
  50       var i1 = new qx.ui.form.TextField();
  51       with(i1)
  52       {
  53         setTop(0);
  54         setRight(0);
  55         setWidth("60%");
  56       };
  57       fs.add(a1, i1);
  58
  59
  60
  61       var a2 = new qx.ui.basic.Atom("TextField 2", "icon/16/apps/preferences-desktop-wallpaper.png");
  62       with(a2)
  63       {
  64         setTop(33);
  65         setLeft(0);
  66         setWidth("35%");
  67         setHorizontalChildrenAlign("left");
  68       };
  69       fs.add(a2);
  70
  71       var i2 = new qx.ui.form.TextField();
  72       with(i2)
  73       {
  74         setTop(30);
  75         setRight(0);
  76         setWidth("60%");
  77       };
  78       fs.add(i2);
  79
  80
  81
  82       var a3 = new qx.ui.basic.Atom("TextField 3");
  83       with(a3)
  84       {
  85         setTop(63);
  86         setLeft(0);
  87         setWidth("35%");
  88         setHorizontalChildrenAlign("left");
  89       };
  90       fs.add(a3);
  91
  92       var i3 = new qx.ui.form.TextField();
  93       with(i3)
  94       {
  95         setTop(60);
  96         setRight(0);
  97         setWidth("60%");
  98       };
  99       fs.add(i3);
 100
 101
 102
 103       d.add(fs);
 104     });
 105   </script>
 106 </body>
 107 </html>