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 为目标数据上面的描述。