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     <svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" viewBox="0 0 300 100">
 117         <rect id="r" width="300" height="100" fill="#ffa"/>
 118         <line x1="0" y1="80" x2="300" y2="80" stroke="#666" stroke-width="1" stroke-dasharray="3" shape-rendering="crispEdges" pointer-events="none"/>
 119         <path id="p" stroke="navy" stroke-width="2" fill="none" pointer-events="none"/>
 120         <script>
 121             var r = document.getElementById('r'),
 122             p = document.getElementById('p'),
 123             signaturePath = '',
 124             isDown = false;
 125
 126             function isTouchEvent(e) {
 127                 return e.type.match(/^touch/);
 128             }
 129
 130             function getCoords(e) {
 131                 if (isTouchEvent(e)) {
 132                     return e.targetTouches[0].clientX + ',' + e.targetTouches[0].clientY;
 133                 }
 134                 return e.clientX + ',' + e.clientY;
 135             }
 136
 137             function down(e) {
 138                 signaturePath += 'M' + getCoords(e) + ' ';
 139                 p.setAttribute('d', signaturePath);
 140                 isDown = true;
 141
 142                 if (isTouchEvent(e)) e.preventDefault();
 143             }
 144
 145             function move(e) {
 146                 if (isDown) {
 147                     signaturePath += 'L' + getCoords(e) + ' ';
 148                     p.setAttribute('d', signaturePath);
 149                 }
 150
 151                 if (isTouchEvent(e)) e.preventDefault();
 152             }
 153
 154             function up(e) {
 155                 isDown = false;
 156
 157                 if (isTouchEvent(e)) e.preventDefault();
 158             }
 159
 160             r.addEventListener('mousedown', down, false);
 161             r.addEventListener('mousemove', move, false);
 162             r.addEventListener('mouseup', up, false);
 163             r.addEventListener('touchstart', down, false);
 164             r.addEventListener('touchmove', move, false);
 165             r.addEventListener('touchend', up, false);
 166             r.addEventListener('mouseout', up, false);
 167
 168             function clearSignature() {
 169                 signaturePath = '';
 170                 p.setAttribute('d', '');
 171             }
 172
 173             function getSignature() {
 174                 return signaturePath;
 175             }
 176         </script>
 177     </svg>
 178
 179
 180
 181
 182
 183
 184
 185
 186 </body>
 187 </html>