examples/form/registration.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   5     <title>Registration Form</title>
   6
   7     <!-- ExtJS -->
   8     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   9     <script type="text/javascript" src="../../bootstrap.js"></script>
  10
  11     <!-- Shared -->
  12     <link rel="stylesheet" type="text/css" href="../shared/example.css" />
  13
  14     <!-- Example -->
  15     <script type="text/javascript" src="registration.js"></script>
  16     <style type="text/css">
  17         /* Styling of global error indicator */
  18         .form-error-state {
  19             font-size: 11px;
  20             padding-left: 20px;
  21             height: 16px;
  22             line-height: 18px;
  23             background: no-repeat 0 0;
  24             cursor: default;
  25         }
  26         .form-error-state-invalid {
  27             color: #C30;
  28             background-image: url(../../resources/themes/images/default/form/exclamation.gif);
  29         }
  30         .form-error-state-valid {
  31             color: #090;
  32             background-image: url(../../resources/themes/images/default/dd/drop-yes.gif);
  33         }
  34
  35         /* Error details tooltip */
  36         .errors-tip .error {
  37             font-style: italic;
  38         }
  39     </style>
  40 </head>
  41 <body>
  42
  43     <h1>Registration Form</h1>
  44
  45     <p>This example shows a common site registration form. The form appears simple but it shows a few special things: </p>
  46     <ul class="feature-list">
  47         <li>The display of field errors has been customized. Fields have <code>msgTarget:'none'</code> so
  48             the errors are not displayed with the individual fields; instead event listeners are attached
  49             to the FormPanel to group up all error messages into a custom global error indicator, with a
  50             persistent tooltip showing the error details.</li>
  51         <li>The "Terms of Use" link has an event handler attached so it opens the page in a modal Ext window.</li>
  52         <li>The password fields have custom validation attached to verify the user enters the same value in both.</li>
  53         <li>The submit button has <code>formBind:true</code> so it is only enabled when the form becomes valid.</li>
  54     </ul>
  55
  56     <p>The js is not minified so it is readable. See <a href="registration.js">registration.js</a>.</p>
  57
  58 </body>
  59 </html>