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>