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
  32     <script type="text/javascript" src="../../ux/TimePicker.js"></script>
  33     <script type="text/javascript" src="../../ux/DateDisplay.js"></script>
  34     <script type="text/javascript" src="/raphael/raphael.js"></script>
  35     <script type="text/javascript" src="/g.raphael/g.raphael.js"></script>
  36     <script type="text/javascript" src="/g.raphael/g.pie.js"></script>
  37
  38
  39     <script type="text/javascript" src="states.js"></script>
  40     <script type="text/javascript" src="dynamic.js"></script>
  41     <script type="text/javascript" src="../examples.js"></script>&nbsp;
  42
  43     <!-- Common Styles for the examples -->
  44     <link rel="stylesheet" type="text/css" href="../examples.css" />
  45
  46
  47
  48 <style>
  49
  50 .roodocs-formblock
  51 {
  52     border:4px solid #CCCCCC;
  53     padding:5px 0pt 5px 10px;
  54 }
  55 </style>
  56 </head>
  57 <body>
  58
  59     <h1>Dynamic Forms built with JavaScript</h1>
  60     <p>
  61         These forms do not do anything and have very little validation. They solely demonstrate
  62         how you can use Ext Forms to build and layout forms on the fly.
  63     </p>
  64
  65     <p>The js is not minified so it is readable. See
  66     <button type="button" onclick="RooDocs.viewSource.show('/dynamic.js')">dynamic.js</button> and
  67     <button type="button" onclick="RooDocs.viewSource.show('/dynamic.html')">dynamic.html</button>
  68     .</p>
  69
  70
  71
  72
  73     <div style="width:345px;"  class="roodocs-formblock">
  74         <h3>Display Form</h3>
  75         <div id="form-ct5"></div>
  76     </div>
  77
  78
  79     <div class="roodocs-formblock" style="width:325px;height:200px">
  80         <h3 style="margin-bottom:5px;">Simple Form</h3>
  81         <div id="form-ct"></div>
  82     </div>
  83     <br/>
  84
  85
  86     <div style="width:565px;" class="roodocs-formblock">
  87
  88             <h3 style="margin-bottom:5px;">Multi-column and labels top</h3>
  89             <div id="form-ct2"></div>
  90
  91     </div>
  92
  93
  94
  95     <br/>
  96     <div style="width:345px;"  class="roodocs-formblock">
  97         <h3>Fieldsets, labels right and complex fields</h3>
  98         <div id="form-ct3"></div>
  99     </div>
 100
 101     <br/>
 102     <div style="width:600px;" class="roodocs-formblock">
 103             <h3 style="margin-bottom:5px;">Multi-column, nesting and fieldsets</h3>
 104             <div id="form-ct4"> </div>
 105     </div>
 106
 107     <div class="x-form-clear"></div>
 108
 109     <div style="width:600px;" class="roodocs-formblock">
 110             <h3 style="margin-bottom:5px;">Testing new stuff</h3>
 111             <div id="form-ct6"> </div>
 112     </div>
 113
 114
 115
 116
 117
 118
 119
 120
 121
 122
 123
 124
 125 </body>
 126 </html>