<html>
<head>
<title>Ext.ux.Multiselect/ItemSelector</title>
<link rel='stylesheet' type='text/css' href='../../../ext-1.1/resources/css/ext-all.css'>
<link rel='stylesheet' type='text/css' href='Multiselect.css'>
<script type="text/javascript" src="../../../ext-1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../ext-1.1/ext-all-debug.js"></script>
<script type="text/javascript" src="Multiselect.js"></script>
<script type="text/javascript" src="DDView.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
/*
* Ext.ux.Multiselect Example Code
*/
var formMultiselect = new Ext.form.Form({ labelWidth: 75 });
var multiselect = new Ext.ux.Multiselect({
name : 'multiselect',
fieldLabel : 'Multiselect',
dataFields : ['code', 'desc'],
data : [['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five']],
valueField : 'code',
displayField : 'desc',
width : 150,
height : 150,
allowBlank : true
});
formMultiselect.add(multiselect);
formMultiselect.addButton('Get Value', function() { alert(formMultiselect.getValues(true)); })
formMultiselect.addButton('Set Value (2,3)', function() { multiselect.setValue('2,3'); })
formMultiselect.addButton('Mark Invalid', function() { multiselect.markInvalid('Invalid'); })
formMultiselect.addButton('Toggle Enabled', function() { if(!multiselect.disabled) {multiselect.disable();} else {multiselect.enable();} });
formMultiselect.addButton('Reset', function() { multiselect.reset();});
formMultiselect.render('form-ct-multiselect');
/*
* Ext.ux.ItemSelector Example Code
*/
var formItemSelector = new Ext.form.Form({ labelWidth: 75 });
var itemSelector = new Ext.ux.ItemSelector({
name : 'itemselector',
fieldLabel : 'ItemSelector',
dataFields : ['code', 'desc'],
fromData : [['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five']],
toData : [['6', 'Six']],
msWidth : 100,
msHeight : 200,
valueField : 'code',
displayField : 'desc'
});
formItemSelector.add(itemSelector);
formItemSelector.addButton('Get Value', function() { alert(formItemSelector.getValues(true)); })
formItemSelector.addButton('Mark Invalid', function() { itemSelector.markInvalid('Invalid'); })
formItemSelector.render('form-ct-itemselector');
});
</script>
</head>
<body style="margin:20px;">
<b>Ext.ux.Multiselect/ItemSelector</b>, <i>Version 2.2</i>
<hr>
<b>Download</b><br>
<a href="MultiselectItemSelector-2.2.zip">MultiselectItemSelector-2.2.zip</a>
<hr>
<b>Ext Version</b><br>
Ext-1.1
<hr>
<b>Author</b><br>
Figtree Systems, <a href="mailto:toby.stuart@figtreesys.com.au">toby.stuart@figtreesys.com.au</a>
<hr>
<b>Demos</b><br>
<div style="width:450px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<div id="form-ct-multiselect"></div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
<br><p>
<div style="width:450px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<div id="form-ct-itemselector"></div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
<hr>
<b>Changelog</b><br>
<table border=1 cellpadding=3 width=100%>
<tr>
<td><b>Version</b></td>
<td><b>Date</b></td>
<td><b>Comments</b></td>
</tr>
<tr>
<td>2.2</td>
<td>30 October 2007</td>
<td>
<i>Thanks to <b>vtswingkid</b> (Valcom Inc.) and <b>paran01d</b> (Grox PTY LTD) for their efforts with many of the enhancements in this release</i>
<br><p><br><p>
<i>Refer to the list of <a href='#config'>config options</a> for explaination of all available options</i>
<br><p><br><p>
Fixes/Enhancements<br>
- General<br>
   - can now add toolbars to Multiselect and ItemSelector lists<br>
   - can now change the delimiter for getValue()<br>
   - fieldset and legend support<br>
- ItemSelector<br>
   - optional 'clear' button for selected list<br>
   - support for local sorting of the available and selected lists<br>
   - can now change the path for the navigation icons<br>
   - can now choose which navigation icons to display<br>
   - added 'change' and 'rowdblclick' events<br>
   - support for duplication in the selected list<br>
- DDView<br>
   - modified to allow duplication
</td>
</tr>
<tr>
<td>2.1</td>
<td>27 September 2007</td>
<td>
Fixes<br>
- General<br>
   - draggable now spelt correctly in all places :)<br>
   - Queries to the store in setValue now match whole value correctly (rather than partial match)<br>
- ItemSelector<br>
   - value now initialised onRender<br>
- DDView<br>
   - fixed bug that prevented drag from working after dragging items onto anything but a valid drop zone
</td>
</tr>
<tr>
<td>2.0</td>
<td>19 September 2007</td>
<td>
Enhancements<br>
- General<br>
   - Now uses Animal's DDView<br>
- ItemSelector<br>
   - Move to top/bottom navigation buttons<br>
   - When using navigation buttons items remain selected in destination list<br>
- Multiselect<br>
   - Border dropped when marked invalid for better visuals (less jumping/popping)<br>
   - Validation for blank, min length and max length<br>
   - Ext.form.Field.getName() now returns correct name
</td>
</tr>
<tr>
<td>1.2</td>
<td>23 August 2007</td>
<td>
Enhancements<br>
- Added ItemSelector (beta)<br>
</td>
</tr>
<tr>
<td>1.1</td>
<td>16 August 2007</td>
<td>
Fixes/Enhancements<br>
- Can now bind to external data store<br>
- List items are now unselectable (prevents text highlight/selection)<br>
- Enabled/disabled now works correctly<br>
- Reset now properly clears selections<br>
- Click and Change events added
</td>
</tr>
<tr>
<td>1.0</td>
<td>14 August 2007</td>
<td>Release</td>
</tr>
</table>
<hr>
<b><a name='config'>Configuration Options</a></b><br>
<table border=1 cellpadding=3 width=100%>
<tr><td style="background:#c0c0c0;" colspan=3>Multiselect</td></tr>
<tr>
<td>Option</td>
<td>Description</td>
<td>Version</td>
</tr>
<tr>
<td>enableToolbar</td>
<td>Places a tool bar at the top of the box</td>
<td>2.2</td>
</tr>
<tr>
<td>delimiter</td>
<td>Change the delimiter from the default ','</td>
<td>2.2</td>
</tr>
<tr>
<td>legend</td>
<td>Wraps the object with a fieldset and specified legend</td>
<td>2.2</td>
</tr>
<tr>
<td>store</td>
<td>Pre-initialised Ext data store.</td>
<td>-</td>
</tr>
<tr>
<td>dataFields</td>
<td>Inline data definition when not using a pre-initialised store. Known to cause problems in some browswers for very long lists. Use store for large datasets.
</td>
<td>-</td>
</tr>
<tr>
<td>data</td>
<td>Inline data when not using a pre-initialised store. Known to cause problems in some browswers for very long lists.