Flex 中List控件的使用，绑定XML！

效果图:

 

Flex代码如下:

 

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="initApp(event)"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; import mx.collections.ArrayList; import mx.controls.Alert; import mx.events.FlexEvent; private function initApp(event:FlexEvent):void{ //指定数据源，这里指定的是XML，测试的时候可以用后面的数组,但是要把文档中的 leftList.labelField="vehCode"; 这段代码去掉! leftList.dataProvider=model.v;//['鲁A46165','鲁A45507','鲁A45509','鲁AD1680','鲁A48038','鲁A47616','鲁A47323','鲁A46296','鲁A48095','鲁AA0158','鲁AA0097','鲁A47525']; leftList.labelField="vehCode"; leftList.dragEnabled=true; leftList.dropEnabled=true; leftList.dragMoveEnabled=true; rightList.dataProvider=[]; rightList.labelField="vehCode"; rightList.dragEnabled=true; rightList.dropEnabled=true; rightList.dragMoveEnabled=true; withEnable(); } private function withEnable():void{ if(ArrayCollection(leftList.dataProvider).length==0){ btnToRight.enabled=false; }else{ btnToRight.enabled=true; } if(ArrayCollection(rightList.dataProvider).length==0){ btnToLeft.enabled=false; }else{ btnToLeft.enabled=true; } } private function toLeft():void{ var items:Array=rightList.selectedItems; if(items.length==0){ Alert.show("请选择一条记录!","操作提示"); } for(var i:Number=0;i<items.length;i++){ ArrayCollection(leftList.dataProvider).addItem(items[i]); ArrayCollection(rightList.dataProvider).removeItemAt(rightList.selectedIndex); } leftList.labelField="vehCode"; rightList.labelField="vehCode"; } private function toRight():void{ var items:Array=leftList.selectedItems; if(items.length==0){ Alert.show("请选择一条记录!","操作提示"); } for(var i:Number=0;i<items.length;i++){ ArrayCollection(rightList.dataProvider).addItem(items[i]); ArrayCollection(leftList.dataProvider).removeItemAt(leftList.selectedIndex); } leftList.labelField="vehCode"; rightList.labelField="vehCode"; } ]]--> </fx:Script> <fx:Declarations> <fx:Model source="http://localhost:8080/Flex/servlet/SeachData" id="model"> </fx:Model> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <mx:Panel x="331" y="96" id="panel" width="406" height="331" layout="absolute" title="左右互选" horizontalAlign="center"> <mx:Label x="36" y="29" text="当前内容" /> <mx:Label x="298" y="29" text="移动内容" /> <mx:List x="10" y="50" allowMultipleSelection="true" mouseOut="withEnable()" doubleClickEnabled="true" doubleClick="toRight()" width="142" height="268" id="leftList"></mx:List> <mx:List x="241" y="51" allowMultipleSelection="true" mouseOut="withEnable()" doubleClickEnabled="true" doubleClick="toLeft()" width="148" height="268" id="rightList"></mx:List> <s:Button y="150" label="->>" width="53" x="175" id="btnToRight" click="toRight()"/> <s:Button x="175" y="191" label="<<-" width="53" id="btnToLeft" click="toLeft()"/> <s:Label x="160" y="56" text="您可以拖动里面的选项，也可以双击!" width="78" height="58"/> </mx:Panel> </s:Application>

 

 

List中的选项可以拖动，双击选择!