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     <!-- teting signature field -->
  44     <script type="text/javascript" src="../../Roo/form/Signature.js"></script>
  45
  46     <script type="text/javascript" src="/web.hoparch/Pman/Hopedb/Pman.Dialog.HopedbRejectB.js"></script>
  47     <!-- Common Styles for the examples -->
  48     <link rel="stylesheet" type="text/css" href="../examples.css" />
  49
  50
  51
  52 <style>
  53
  54 .roodocs-formblock
  55 {
  56     border:4px solid #CCCCCC;
  57     padding:5px 0pt 5px 10px;
  58 }
  59 </style>
  60 </head>
  61 <body>
  62
  63     <h1>Dynamic Forms built with JavaScript</h1>
  64     <p>
  65         These forms do not do anything and have very little validation. They solely demonstrate
  66         how you can use Ext Forms to build and layout forms on the fly.
  67     </p>
  68
  69     <p>The js is not minified so it is readable. See
  70     <button type="button" onclick="RooDocs.viewSource.show('/dynamic.js')">dynamic.js</button> and
  71     <button type="button" onclick="RooDocs.viewSource.show('/dynamic.html')">dynamic.html</button>
  72     .</p>
  73
  74
  75
  76
  77     <div style="width:345px;"  class="roodocs-formblock">
  78         <h3>Display Form</h3>
  79         <div id="form-ct5"></div>
  80     </div>
  81
  82
  83     <div class="roodocs-formblock" style="width:325px;height:200px">
  84         <h3 style="margin-bottom:5px;">Simple Form</h3>
  85         <div id="form-ct"></div>
  86     </div>
  87     <br/>
  88
  89
  90     <div style="width:565px;" class="roodocs-formblock">
  91
  92             <h3 style="margin-bottom:5px;">Multi-column and labels top</h3>
  93             <div id="form-ct2"></div>
  94
  95     </div>
  96
  97
  98
  99     <br/>
 100     <div style="width:345px;"  class="roodocs-formblock">
 101         <h3>Fieldsets, labels right and complex fields</h3>
 102         <div id="form-ct3"></div>
 103     </div>
 104
 105     <br/>
 106     <div style="width:600px;" class="roodocs-formblock">
 107             <h3 style="margin-bottom:5px;">Multi-column, nesting and fieldsets</h3>
 108             <div id="form-ct4"> </div>
 109     </div>
 110
 111     <div class="x-form-clear"></div>
 112
 113     <div style="width:600px;" class="roodocs-formblock">
 114             <h3 style="margin-bottom:5px;">Signature</h3>
 115             <div id="form-ct7">
 116 <!--                    <p>Please sign on the dotted line below.</p>
 117                     <iframe src=signature.svg style="width: 300px; height: 100px; border: 0;"></iframe>
 118                     <div>
 119                         <button onclick=showSignature()>Show signaure path data</button>
 120                         <button onclick=clearSignature()>Clear signature</button>
 121                         <div id=pathdata></div>
 122                     </div>
 123                     <script>
 124                     var svg = document.getElementsByTagName('iframe')[0].contentWindow;
 125                     var pathdata = document.getElementById('pathdata');
 126
 127                     function showSignature() {
 128                         pathdata.textContent = svg.getSignature();
 129                     }
 130
 131                     function clearSignature() {
 132                         svg.clearSignature();
 133                         pathdata.textContent = '';
 134                     }
 135                     </script>-->
 136             </div>
 137     </div>
 138
 139     <div class="x-form-clear"></div>
 140     <div id="testing-tag">
 141
 142     </div>
 143 <!--    <div style="width:600px;" class="roodocs-formblock">
 144             <h3 style="margin-bottom:5px;">Testing new stuff</h3>
 145             <div id="form-ct6"> </div>
 146     </div>-->
 147
 148
 149
 150
 151
 152
 153
 154
 155
 156
 157
 158
 159 </body>
 160 </html>