extjs-gpl
Version:
GPL licensed version of Sencha Ext JS
42 lines (33 loc) • 1.89 kB
HTML
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<title>MultiSelect & ItemSelector</title>
<!-- ExtJS -->
<script type="text/javascript" src="../shared/include-ext.js"></script>
<script type="text/javascript" src="../shared/options-toolbar.js"></script>
<!-- Shared -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<!-- Example -->
<script type="text/javascript" src="multiselect-demo.js"></script>
<!-- GC -->
</head>
<body>
<h1>MultiSelect & 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>