<html>
<head>
<title>Ext.ux.Multiselect/ItemSelector</title>
<link rel="stylesheet" type="text/css" href="GroupHeaderPlugin.css" />
<link rel="stylesheet" type="text/css"
href="../../resources/css/ext-all.css" />
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<link rel='stylesheet' type='text/css' href='Multiselect.css'>
<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
Ext用户扩展控件----------支持多选的列表，就像QQ控件添加删除音乐列表的控件
需积分: 9 81 浏览量
2009-03-01
13:41:35
上传
评论
收藏 26KB RAR 举报
Uxmuiltselect.rar （14个子文件） 
Uxmuiltselect 
Multiselect.html 13KB
Multiselect.css 280B Multiselect2.html 4KB Multiselect2.js 17KB
left2.gif 920B right2.gif 925B Multiselect2.css 423B up2.gif 920B DDView.js 16KB Multiselect.js 23KB top2.gif 927B down2.gif 920B bottom2.gif 927B DDView2.js 19KB资源评论
