--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <title>Registration Form</title>
+
+ <!-- ExtJS -->
+ <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+ <script type="text/javascript" src="../../bootstrap.js"></script>
+
+ <!-- Shared -->
+ <link rel="stylesheet" type="text/css" href="../shared/example.css" />
+
+ <!-- Example -->
+ <script type="text/javascript" src="registration.js"></script>
+ <style type="text/css">
+ /* Styling of global error indicator */
+ .form-error-state {
+ font-size: 11px;
+ padding-left: 20px;
+ height: 16px;
+ line-height: 18px;
+ background: no-repeat 0 0;
+ cursor: default;
+ }
+ .form-error-state-invalid {
+ color: #C30;
+ background-image: url(../../resources/themes/images/default/form/exclamation.gif);
+ }
+ .form-error-state-valid {
+ color: #090;
+ background-image: url(../../resources/themes/images/default/dd/drop-yes.gif);
+ }
+
+ /* Error details tooltip */
+ .errors-tip .error {
+ font-style: italic;
+ }
+ </style>
+</head>
+<body>
+
+ <h1>Registration Form</h1>
+
+ <p>This example shows a common site registration form. The form appears simple but it shows a few special things: </p>
+ <ul class="feature-list">
+ <li>The display of field errors has been customized. Fields have <code>msgTarget:'none'</code> so
+ the errors are not displayed with the individual fields; instead event listeners are attached
+ to the FormPanel to group up all error messages into a custom global error indicator, with a
+ persistent tooltip showing the error details.</li>
+ <li>The "Terms of Use" link has an event handler attached so it opens the page in a modal Ext window.</li>
+ <li>The password fields have custom validation attached to verify the user enters the same value in both.</li>
+ <li>The submit button has <code>formBind:true</code> so it is only enabled when the form becomes valid.</li>
+ </ul>
+
+ <p>The js is not minified so it is readable. See <a href="registration.js">registration.js</a>.</p>
+
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff