1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
6 <link rel="stylesheet" type="text/css" href="../../cssX/roojs-all.css"/>
7 <link rel="stylesheet" type="text/css" href="../../cssX/xtheme-slate.css"/>
9 <script type="text/javascript" src="../../roojs-all.js"></script>
11 <script type="text/javascript" src="forms.js"></script>
12 <link rel="stylesheet" type="text/css" href="forms.css" />
14 <!-- Common Styles for the examples -->
15 <link rel="stylesheet" type="text/css" href="../examples.css" />
18 <script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
20 <p>The js is not minified so it is readable. See <a href="forms.js">forms.js</a>.</p>
22 <form id="form1" class="x-form">
23 <div style="width:400px;">
24 <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
25 <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
26 <h3 style="margin-bottom:5px;">Ext Live Forms</h3>
27 <!-- begin form layout -->
28 <div class="x-form-bd" id="container">
30 <legend>ComboBox Fields</legend>
32 <div class="x-form-item">
33 <label for="combo-local">Local Data:</label>
34 <div class="x-form-element">
35 <input type="text" size="20" name="combo-local" id="combo-local" />
39 <div class="x-form-item">
40 <label for="combo-ajax">Ajax Data:</label>
41 <div class="x-form-element">
42 <input type="text" size="20" name="combo-ajax" id="combo-ajax" />
46 <div class="x-form-item">
47 <label for="combo-selection">Only Selection:</label>
48 <div class="x-form-element">
49 <input type="text" size="20" value="OH" name="combo-selection" id="combo-selection" />
53 <div class="x-form-item">
54 <label for="combo-tpl">Item Templates:</label>
55 <div class="x-form-element">
56 <input type="text" size="20" name="combo-tpl" id="combo-tpl" />
60 <div class="x-form-item">
61 <label for="combo-tpl">Unobtrusive:</label>
62 <div class="x-form-element">
63 <select name="light" id="light">
64 <option value="Shade">Shade</option>
65 <option value="Mostly Shady">Mostly Shady</option>
66 <option value="Sun or Shade">Sun or Shade</option>
68 <option value="Mostly Sunny">Mostly Sunny</option>
70 <option value="Sunny">Sunny</option>
78 <legend>Component Fields</legend>
80 <div class="x-form-item">
81 <label for="markup-date">Date:</label>
82 <div class="x-form-element">
83 <input type="text" size="10" value="03/08/03" name="markup-date" id="markup-date" />
89 <legend>Live Validation and key filtering</legend>
91 <div class="x-form-item">
92 <label for="required">Required:</label>
93 <div class="x-form-element">
94 <input type="text" size="24" name="required" id="required" />
98 <div class="x-form-item">
99 <label for="alpha">Alpha:</label>
100 <div class="x-form-element">
101 <input type="text" size="24" name="alpha" id="alpha" />
105 <div class="x-form-item">
106 <label for="alpha2">(No Filter):</label>
107 <div class="x-form-element">
108 <input type="text" size="24" name="alpha2" id="alpha2" />
112 <div class="x-form-item">
113 <label for="alphanum">Alphanum:</label>
114 <div class="x-form-element">
115 <input type="text" size="24" name="alphanum" id="alphanum" />
119 <div class="x-form-item">
120 <label for="email">Email:</label>
121 <div class="x-form-element">
122 <input type="text" size="32" name="email" id="email" />
126 <div class="x-form-item">
127 <label for="url">URL:</label>
128 <div class="x-form-element">
129 <input type="text" size="32" name="url" id="url" />
133 <div class="x-form-item">
134 <label for="url">Auto grow textareas:</label>
135 <div class="x-form-element">
136 <textarea name="grow" id="grow" cols="25" rows="3"></textarea>
141 <!-- end form layout -->
143 <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>