Ext.ux.Multiselect/ItemSelector, Version 3.0
Download
MultiselectItemSelector-3.0.zip
Ext Version
Ext-2.0
Author
Figtree Systems, toby.stuart@figtreesys.com.au.
Many others have submitted fixes and enhancements. Far too many to name. Where possible I have credited them in the changelog below.
Demos
Looking for the Ext 1.x demo page? Find it here.




Changelog
Version Date Comments
3.0 06 December 2007 Thanks to vtswingkid (Valcom Inc.) for porting this extension to Ext2.0


Enhancements
 - General
   - Upgraded to support Ext2.0

2.2 30 October 2007 Thanks to vtswingkid (Valcom Inc.) and paran01d (Grox PTY LTD) for their efforts with many of the enhancements in this release


Refer to the list of config options for explaination of all available options


Fixes/Enhancements
 - General
   - can now add toolbars to Multiselect and ItemSelector lists
   - can now change the delimiter for getValue()
   - fieldset and legend support
 - ItemSelector
   - optional 'clear' button for selected list
   - support for local sorting of the available and selected lists
   - can now change the path for the navigation icons
   - can now choose which navigation icons to display
   - added 'change' and 'rowdblclick' events
   - support for duplication in the selected list
 - DDView
   - modified to allow duplication

2.1 27 September 2007 Fixes
 - General
   - draggable now spelt correctly in all places :)
   - Queries to the store in setValue now match whole value correctly (rather than partial match)
 - ItemSelector
   - value now initialised onRender
 - DDView
   - fixed bug that prevented drag from working after dragging items onto anything but a valid drop zone
2.0 19 September 2007 Enhancements
 - General
   - Now uses Animal's DDView
 - ItemSelector
   - Move to top/bottom navigation buttons
   - When using navigation buttons items remain selected in destination list
 - Multiselect
   - Border dropped when marked invalid for better visuals (less jumping/popping)
   - Validation for blank, min length and max length
   - Ext.form.Field.getName() now returns correct name
1.2 23 August 2007 Enhancements
- Added ItemSelector (beta)
1.1 16 August 2007 Fixes/Enhancements
- Can now bind to external data store
- List items are now unselectable (prevents text highlight/selection)
- Enabled/disabled now works correctly
- Reset now properly clears selections
- Click and Change events added
1.0 14 August 2007 Release

Configuration Options
Multiselect
Option Description Version
enableToolbar Places a tool bar at the top of the box 2.2+
delimiter Change the delimiter from the default ',' 2.2+
legend Wraps the object with a fieldset and specified legend 2.2+
store Pre-initialised Ext data store. -
dataFields 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. -
data Inline data when not using a pre-initialised store. Known to cause problems in some browswers for very long lists. Use store for large datasets. -
width Desired width (in pixels) of the widget. -
height Desired height (in pixels) of the widget. -
displayField Name/Index of the desired display field in the dataset. -
valueField Name/Index of the desired value field in the dataset. -
allowBlank Allow blank for validation. -
minLength Minimum number of selections allowed. -
maxLength Maximum number of selections allowed. -
blankText Text displayed when widget contains no items. -
minLengthText Validation message displayed when minLength is not met. -
maxLengthText Validation message displayed when maxLength is not met. -
isFormField Denotes whether the widget is a form field (ie. is submitted). -
ItemSelector
Option Description Version
hideNavIcons hide all navigation icons 2.2+
drawUpIcon decide whether to draw iconUp 2.2+
drawDownIcon decide whether to draw iconDown 2.2+
drawLeftIcon decide whether to draw iconLeft 2.2+
drawRightIcon decide whether to draw iconRight 2.2+
drawTopIcon decide whether to draw iconTop 2.2+
drawBotIcon decide whether to draw iconBottom 2.2+
imagePath Set to the location of your directional icons 2.2+
switchToFrom Swap the location of the to and from boxes 2.2+
enableToolbar Places toolbars at the top of both boxes (.toMultiselect.toolbar, .fromMutliselect.toolbar) 2.2+
enableClear Places a toolbar with a clear button at the top of the to box 2.2+
delimiter Change the default from ',' 2.2+
readOnly disable drag and drop, and icons 2.2+
toLegend wrap the to box in a fieldset with the specified legend 2.2+
fromLegend wrap the from box in a fieldset with the specified legend 2.2+
toSortField sort the to box according to the specified field 2.2+
toSortDir specify the sort direction (default 'ASC') 2.2+
fromSortField sort the from box according to the specified field 2.2+
fromSortDir specify the sort direction (default 'ASC') 2.2+
msWidth Desired width (in pixels) of the Multiselect from/to lists. -
msHeight Desired height (in pixels) of the Multiselect from/to lists. -
iconUp Path to image representing 'Up' navigation. -
iconDown Path to image representing 'Down' navigation. -
iconLeft Path to image representing 'Left' navigation. -
iconRight Path to image representing 'Right' navigation. -
iconTop Path to image representing 'To Top' navigation. -
iconBottom Path to image representing 'To Bottom' navigation. -
fromStore Pre-initialised Ext data store. -
toStore Pre-initialised Ext data store. -
dataFields 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. -
fromData Inline data when not using a pre-initialised store. Known to cause problems in some browswers for very long lists. Use store for large datasets. -
toData Inline data when not using a pre-initialised store. Known to cause problems in some browswers for very long lists. Use store for large datasets. -

Basic Usage

View source for example code