flex 模拟 ext 的 ItemSelector 双选框控件

模拟 ext 的 ItemSelector 写了个控件，可以实现拖拽、鼠标双击、按钮操作功能，大概界面如下，原来里面的上下移动的功能感觉没有什么用也就没有实现，有需要的自己加两个方法实现下：

 

 

 

itemSelector.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="{wid}" height="{hei}" creationComplete="init();">
	<mx:Script source="./code/itemSelector.as"/>
	
	<mx:HBox>
		<mx:VBox>
			<mx:Label fontWeight="bold" text="{srclabel}"/>
			<mx:List id="src" width="{listwid}" height="{listhei}" dataProvider="{srclist}"
					 allowMultipleSelection="true" dragEnabled="true" dropEnabled="true"
					 dragMoveEnabled="true" doubleClick="srcDoubleClick(event);" doubleClickEnabled="true"/>
		</mx:VBox>
		<mx:VBox verticalAlign="middle" height="100%">
			<mx:TileList id="imgSelect" maxColumns="1" width="20" height="80" 
						 verticalAlign="middle" borderStyle="none"
						 itemClick="imgSelect_itemClick(event);">
				<mx:dataProvider>
					<mx:Array>
						<mx:Object icon="{insAll}" label=""/>
						<mx:Object icon="{ins}" label=""/>
						<mx:Object icon="{del}" label=""/>
						<mx:Object icon="{delAll}" label=""/>
					</mx:Array>
				</mx:dataProvider>
			</mx:TileList>
		</mx:VBox>
		<mx:VBox>
			<mx:Label fontWeight="bold" text="{destlabel}"/>
			<mx:List id="dest" width="{listwid}" height="{listhei}" dataProvider="{destlist}"
					 allowMultipleSelection="true" dragEnabled="true" dropEnabled="true"
					 dragMoveEnabled="true" doubleClick="destDoubleClick(event);" doubleClickEnabled="true"/>
		</mx:VBox>
	</mx:HBox>
</mx:Canvas>

 

itemSelector.as

// ActionScript file
/**
 * @auth:Jack
 * @date:2009-11-18
 */
import flash.events.MouseEvent;

import mx.collections.ArrayCollection;
import mx.events.ListEvent;
import mx.rpc.events.ResultEvent;

[Bindable]
[Embed(source="flex/assets/images/table_row_delete.png")]
public var ins:Class;

[Bindable]
[Embed(source="flex/assets/images/table_row_insert.png")]
public var del:Class;

[Bindable]
[Embed(source="flex/assets/images/application_side_contract.png")]
public var delAll:Class;

[Bindable]
[Embed(source="flex/assets/images/application_side_expand.png")]
public var insAll:Class;

[Bindable]
public var srclist:ArrayCollection;

[Bindable]
public var destlist:ArrayCollection;

[Bindable]
public var srclabel:String;

[Bindable]
public var destlabel:String;

[Bindable]
public var wid:uint;

[Bindable]
public var hei:uint;

[Bindable]
public var listwid:uint;

[Bindable]
public var listhei:uint;

private function init():void {
	
	if (srclist == null) srclist = new ArrayCollection();
	if (destlist == null) destlist = new ArrayCollection();
	wid = wid < 400 ? 400 : wid;
	hei = hei < 200 ? 200 : hei;
	listwid = wid * 0.45;
	listhei = hei - 30;
}

private function findAuthRangeHandler(event:ResultEvent):void {
	var obj:Object = event.result as Object;
	
	srclist = obj.prodSpecs as ArrayCollection;
}

private function imgSelect_itemClick(event:ListEvent):void {
	var ind:uint = event.rowIndex;
	switch (ind) {
		case 0:
			for each (var obj1:Object in srclist) {
				destlist.addItem(obj1);
			}
			srclist.removeAll();
			break;
			
		case 1:
			for each (var obj2:Object in src.selectedItems) {
				destlist.addItem(obj2);
			}
			for each (var ind2:int in src.selectedIndices) {
				srclist.removeItemAt(ind2);
			}
			break;
			
		case 2:
			for each (var obj3:Object in dest.selectedItems) {
				srclist.addItem(obj3);
			}
			for each (var ind3:int in dest.selectedIndices) {
				destlist.removeItemAt(ind3);
			}
			break;
			
		case 3:
			for each (var obj4:Object in destlist) {
				srclist.addItem(obj4);
			}
			destlist.removeAll();
			break;
			
		default:
	}
}

private function srcDoubleClick(event:MouseEvent):void {
	destlist.addItem(src.selectedItem);
	srclist.removeItemAt(src.selectedIndex);
}

private function destDoubleClick(event:MouseEvent):void {
	srclist.addItem(dest.selectedItem);
	destlist.removeItemAt(dest.selectedIndex);
}

 

 

调用方法：

<isps:itemSelector id="ps" width="600" height="500" 
		 srclist="{prodSpecs}" wid="400" hei="250" destlist="{orderTypes}"
		 srclabel="所有产品规格" destlabel="已选产品规格"/>

 

isps 自定义命名空间，指向你存放 itemSelector.mxml 文件的位置；

srclist 源数据源，数据结构为 [{label:"haha", data:"1"}, {label:"heihei", data:"2"}] 的 ArrayCollection ；

destlist 目标数据源，数据结构和源数据一样，如果初始为空的话可以不传该属性，最后取值也直接使用 ps.destlist 即可，取出来也是上面格式的 ArrayCollection；

wid 为画布宽度，最小限制为400；

hei 为画布高度，最小限制为200；

srclabel 为源数据上面的描述；

destlabel 为目标数据上面的描述。