git.roojs.org Git - roojs1/blob - examples/form/dynamic.html

   1 <!DOCTYPE html
   2       PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   3       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   4 <html>
   5 <head>
   6 <meta http-equiv="Content-Type" content="text/html; charset=utf8">
   7 <title>Forms</title>
   8
   9
  10     <link rel="stylesheet" type="text/css" href="../../css/roojs.css"/>
  11     <link rel="stylesheet" type="text/css" href="../../css/xtheme-slate.css"/>
  12     <link rel="stylesheet" type="text/css" href="../../css/daypicker.css"/>
  13
  14
  15      <script type="text/javascript" src="../../roojs-debug.js"></script>
  16
  17     <script type="text/javascript" src="../../Roo/form/DayPicker.js"></script>
  18
  19     <!-- for testing -->
  20     <script type="text/javascript" src="../../Roo/form/HtmlEditor.js"></script>
  21     <script type="text/javascript" src="../../Roo/form/HtmlEditor/ToolbarStandard.js"></script>
  22     <script type="text/javascript" src="../../Roo/form/HtmlEditor/ToolbarContext.js"></script>
  23
  24     <script type="text/javascript" src="../../Roo/form/ComboBoxArray.js"></script>
  25     <script type="text/javascript" src="../../Roo/form/MonthField.js"></script>
  26
  27       <!-- for testing bug in password.... -->
  28     <script type="text/javascript" src="../../Roo/form/TextField.js"></script>
  29     <!-- for testing new time picker.. -->
  30
  31     <script type="text/javascript" src="../../Roo/form/Radio.js"></script>
  32     <script type="text/javascript" src="../../Roo/form/Select.js"></script>
  33
  34     <script type="text/javascript" src="../../ux/TimePicker.js"></script>
  35     <script type="text/javascript" src="../../ux/DateDisplay.js"></script>
  36     <script type="text/javascript" src="/raphael/raphael.js"></script>
  37     <script type="text/javascript" src="/g.raphael/g.raphael.js"></script>
  38     <script type="text/javascript" src="/g.raphael/g.pie.js"></script>
  39
  40
  41     <script type="text/javascript" src="states.js"></script>
  42     <script type="text/javascript" src="dynamic.js"></script>
  43     <script type="text/javascript" src="../examples.js"></script>&nbsp;
  44
  45     <!-- teting signature field -->
  46     <script type="text/javascript" src="../../Roo/form/Signature.js"></script>
  47
  48     <!-- Common Styles for the examples -->
  49     <link rel="stylesheet" type="text/css" href="../examples.css" />
  50
  51
  52
  53 <style>
  54
  55 .roodocs-formblock
  56 {
  57     border:4px solid #CCCCCC;
  58     padding:5px 0pt 5px 10px;
  59 }
  60 </style>
  61 </head>
  62 <body>
  63
  64     <h1>Dynamic Forms built with JavaScript</h1>
  65     <p>
  66         These forms do not do anything and have very little validation. They solely demonstrate
  67         how you can use Ext Forms to build and layout forms on the fly.
  68     </p>
  69
  70     <p>The js is not minified so it is readable. See
  71     <button type="button" onclick="RooDocs.viewSource.show('/dynamic.js')">dynamic.js</button> and
  72     <button type="button" onclick="RooDocs.viewSource.show('/dynamic.html')">dynamic.html</button>
  73     .</p>
  74
  75
  76
  77
  78     <div style="width:345px;"  class="roodocs-formblock">
  79         <h3>Display Form</h3>
  80         <div id="form-ct5"></div>
  81     </div>
  82
  83
  84     <div class="roodocs-formblock" style="width:325px;height:200px">
  85         <h3 style="margin-bottom:5px;">Simple Form</h3>
  86         <div id="form-ct"></div>
  87     </div>
  88     <br/>
  89
  90
  91     <div style="width:565px;" class="roodocs-formblock">
  92
  93             <h3 style="margin-bottom:5px;">Multi-column and labels top</h3>
  94             <div id="form-ct2"></div>
  95
  96     </div>
  97
  98
  99
 100     <br/>
 101     <div style="width:345px;"  class="roodocs-formblock">
 102         <h3>Fieldsets, labels right and complex fields</h3>
 103         <div id="form-ct3"></div>
 104     </div>
 105
 106     <br/>
 107     <div style="width:600px;" class="roodocs-formblock">
 108             <h3 style="margin-bottom:5px;">Multi-column, nesting and fieldsets</h3>
 109             <div id="form-ct4"> </div>
 110     </div>
 111
 112     <div class="x-form-clear"></div>
 113
 114     <div style="width:600px;" class="roodocs-formblock">
 115             <h3 style="margin-bottom:5px;">Signature</h3>
 116             <div id="form-ct7">
 117 <!--                    <p>Please sign on the dotted line below.</p>
 118                     <iframe src=signature.svg style="width: 300px; height: 100px; border: 0;"></iframe>
 119                     <div>
 120                         <button onclick=showSignature()>Show signaure path data</button>
 121                         <button onclick=clearSignature()>Clear signature</button>
 122                         <div id=pathdata></div>
 123                     </div>
 124                     <script>
 125                     var svg = document.getElementsByTagName('iframe')[0].contentWindow;
 126                     var pathdata = document.getElementById('pathdata');
 127
 128                     function showSignature() {
 129                         pathdata.textContent = svg.getSignature();
 130                     }
 131
 132                     function clearSignature() {
 133                         svg.clearSignature();
 134                         pathdata.textContent = '';
 135                     }
 136                     </script>-->
 137             </div>
 138     </div>
 139
 140     <div class="x-form-clear"></div>
 141     <div id="testing-tag">
 142
 143     </div>
 144 <!--    <div style="width:600px;" class="roodocs-formblock">
 145             <h3 style="margin-bottom:5px;">Testing new stuff</h3>
 146             <div id="form-ct6"> </div>
 147     </div>-->
 148
 149
 150
 151
 152
 153
 154
 155
 156
 157
 158
 159
 160 </body>
 161 </html>
 162