Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / examples / multiselect / multiselect-demo.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5     <title>MultiSelect &amp; ItemSelector</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="multiselect-demo.js"></script>
16     <link rel="stylesheet" type="text/css" href="../ux/css/ItemSelector.css" />
17
18 </head>
19 <body>
20     <h1>MultiSelect &amp; ItemSelector</h1>
21     <p>The js is not minified so it is readable. See <a href="multiselect-demo.js">multiselect-demo.js</a>.</p>
22     
23     <h2>MultiSelect</h2>
24     <p>MultiSelect is a form field type that allows selection of one or more items from a list. The list is
25     populated using a data Store. Items can be reordered via drag and drop if <code>ddReorder:true</code> is set.</p>
26     <p>This example has <code>allowBlank:false</code> so a validation error will appear when the item's selections
27     are cleared. Validations for <code>minSelections</code> and <code>maxSelections</code> can also be applied.</p>
28     <div id="multiselect" class="demo-ct"></div>
29     
30     <h2>ItemSelector</h2>
31     <p>ItemSelector is a specialized MultiSelect field that renders as a pair of MultiSelect field, one with
32     available options and the other with selected options. A set of buttons in between allows items to be
33     moved between the fields and reordered within the selection. Items can also be moved via drag and drop.
34     All the same validations as MultiSelect are supported.</p>
35     <div id="itemselector" class="demo-ct"></div>
36 </body>
37 </html>