Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / multiselect / multiselect-demo.html
diff --git a/examples/multiselect/multiselect-demo.html b/examples/multiselect/multiselect-demo.html

index 21b847d..6169c8e 100644 (file)
--- a/examples/multiselect/multiselect-demo.html
+++ b/examples/multiselect/multiselect-demo.html
@@ -1,31 +1,37 @@
-<html>\r
-<head>\r
-    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />\r
-    <title>MultiSelect &amp; ItemSelector</title>\r
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+    <title>MultiSelect &amp; ItemSelector</title>
+
+    <!-- ExtJS -->
      <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
-    <link rel="stylesheet" type="text/css" href="../ux/css/MultiSelect.css"/>
-    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
-    \r
-    <script type="text/javascript" src="../../adapter/ext/ext-base.js"> </script>\r
-    <script type="text/javascript" src="../../ext-all.js"> </script>
-\r
-    <script type="text/javascript" src="../ux/MultiSelect.js"></script>\r
-    <script type="text/javascript" src="../ux/ItemSelector.js"></script>
-    \r
-    <script type="text/javascript" src="multiselect-demo.js"></script>\r
-    <script type="text/javascript" src="../shared/examples.js"></script>\r\r
-</head>\r
-<body>\r
-    <h1>MultiSelect &amp; ItemSelector</h1>\r
-    <p>The js is not minified so it is readable. See <a href="multiselect-demo.js">multiselect-demo.js</a>.</p>\r
-    \r
-    <b>MultiSelect</b><br />\r
-\r
-    <p>Press Save with no items selected to see an example of validation applied.</p>\r
-    <div id="multiselect" class="demo-ct" style="margin-bottom:15px;"></div>\r
-    \r
-    <b>ItemSelector</b><br />\r
-    <p>Supports drag and drop, double-click, button move/reorder, etc.\r
-    <div id="itemselector" class="demo-ct"></div>\r
-</body>\r
-</html>\r
+    <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="multiselect-demo.js"></script>
+    <link rel="stylesheet" type="text/css" href="../ux/css/ItemSelector.css" />
+
+</head>
+<body>
+    <h1>MultiSelect &amp; ItemSelector</h1>
+    <p>The js is not minified so it is readable. See <a href="multiselect-demo.js">multiselect-demo.js</a>.</p>
+    
+    <h2>MultiSelect</h2>
+    <p>MultiSelect is a form field type that allows selection of one or more items from a list. The list is
+    populated using a data Store. Items can be reordered via drag and drop if <code>ddReorder:true</code> is set.</p>
+    <p>This example has <code>allowBlank:false</code> so a validation error will appear when the item's selections
+    are cleared. Validations for <code>minSelections</code> and <code>maxSelections</code> can also be applied.</p>
+    <div id="multiselect" class="demo-ct"></div>
+    
+    <h2>ItemSelector</h2>
+    <p>ItemSelector is a specialized MultiSelect field that renders as a pair of MultiSelect field, one with
+    available options and the other with selected options. A set of buttons in between allows items to be
+    moved between the fields and reordered within the selection. Items can also be moved via drag and drop.
+    All the same validations as MultiSelect are supported.</p>
+    <div id="itemselector" class="demo-ct"></div>
+</body>
+</html>