swat/apps/qooxdoo-examples/test/Window_6.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>Dialog with qx.ui.form.TextField and qx.ui.form.TextArea</p>
  16     <p>Testing initial focus handling.</p>
  17   </div>
  18
  19
  20   <script type="text/javascript" language="JavaScript">
  21
  22
  23       qx.core.Init.getInstance().defineMain(function() {
  24
  25       var d = qx.ui.core.ClientDocument.getInstance();
  26       var txtfld;
  27
  28       var  dialogEditFrage = new qx.ui.window.Window("Edit", "icon/16/editor.png");
  29
  30
  31       with(dialogEditFrage) {
  32         setSpace(300, 400, 100, 300);
  33
  34         setShowClose(false);
  35
  36         var qxObj = new qx.ui.basic.Atom('Question');
  37         with(qxObj)
  38         {
  39           setHorizontalChildrenAlign('right');
  40           set({top:10,left:10,width:'20%'});
  41         };
  42         add(qxObj);
  43
  44         qxObj = txtfld = new qx.ui.form.TextArea();
  45         with (qxObj) {
  46           set({top:10,right:10,width:'70%'})
  47         }
  48         add(qxObj);
  49
  50         txtfld.addEventListener("appear", function(e) {
  51           this.focus();
  52         });
  53
  54         qxObj = new qx.ui.basic.Atom('Type');
  55         with(qxObj)
  56         {
  57           setHorizontalChildrenAlign('right');
  58           set({top:70,left:10,width:'20%'});
  59         };
  60         add(qxObj);
  61
  62         qxObj = new qx.ui.form.TextField();
  63         with (qxObj) {
  64           set({top:70,right:10,width:'70%'})
  65         }
  66         add(qxObj);
  67
  68
  69         var btnOK = new qx.ui.form.Button("OK", "icon/16/button-ok.png");
  70         var btnCancel = new qx.ui.form.Button("Cancel", "icon/16/button-cancel.png");
  71         var btnSetFocus = new qx.ui.form.Button("Set Focus To First Field", "icon/16/reload.png");
  72
  73         btnOK.set({ bottom : 10, right : 10 });
  74         btnCancel.set({ bottom : 10, left : 10 });
  75         btnSetFocus.set({ bottom : 10, left : 100 });
  76
  77         btnCancel.addEventListener("execute", function(e) {
  78           dialogEditFrage.close();
  79         });
  80         btnOK.addEventListener("execute", function(e) {
  81           dialogEditFrage.close();
  82         });
  83
  84         btnSetFocus.addEventListener("execute", function(e) {
  85           txtfld.focus();
  86         });
  87
  88         add(btnOK, btnCancel, btnSetFocus);
  89       }
  90
  91       var btnOpen = new qx.ui.form.Button("Open the dialog");
  92       btnOpen.set({ top : 50, left : 20 });
  93       btnOpen.addEventListener("click", function(e) {
  94         dialogEditFrage.open();
  95       });
  96
  97       var btnRestore = new qx.ui.form.Button("Restore the dialog");
  98       btnRestore.set({ top : 80, left : 20 });
  99       btnRestore.addEventListener("click", function(e) {
 100         dialogEditFrage.restore();
 101       });
 102
 103       d.add(btnOpen,btnRestore,dialogEditFrage);
 104     });
 105
 106   </script>
 107
 108 </body>
 109 </html>