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="application1_creationCompleteHandler(event)"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <fx:Script> <![CDATA[ import components.userComboBox; import mx.collections.ArrayCollection; import mx.containers.TitleWindow; import mx.controls.Alert; import mx.controls.treeClasses.TreeItemRenderer; import mx.core.UITextField; import mx.events.CalendarLayoutChangeEvent; import mx.events.FlexEvent; import mx.managers.PopUpManager; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import spark.events.IndexChangeEvent; [Bindable] private var users:ArrayCollection = new ArrayCollection(); private function inituser():void { users= new ArrayCollection(); users.addItem({label: "xx1", data: "xx1", imageurl:"images/user/keai1.png"}); users.addItem({label: "xx2", data: "xx2", imageurl:"images/user/keai2.png"}); users.addItem({label: "xx3", data: "xx3", imageurl:"images/user/default.jpg"}); users.addItem({label: "xx4", data: "xx4", imageurl:"images/user/keai1.png"}); users.addItem({label: "xx5", data: "xx5", imageurl:"images/user/default.jpg"}); users.addItem({label: "xx6", data: "xx6", imageurl:"images/user/keai2.png"}); users.addItem({label: "xx7", data: "xx7", imageurl:"images/user/keai1.png"}); } protected function application1_creationCompleteHandler(event:FlexEvent):void { inituser(); } [Bindable] private var myXML:XML = <root> <parent name="大类1"> <child name="大类1-小类1"/> <child name="大类1-小类2"/> <child name="大类1-小类3"/> </parent> <parent name="大类2"> <child name="大类2-小类1"/> <child name="大类2-小类2"/> <child name="大类2-小类3"/> </parent> </root> ; ]]> </fx:Script> <mx:VBox > <s:HGroup width="100%"> <s:HGroup width="100%" paddingLeft="10"> </s:HGroup> </s:HGroup> <s:VGroup width="100%" height="100%"> <mx:FormItem label="负责人:" paddingTop="0" paddingBottom="0" > <s:ComboBox id="user" width="400" itemRenderer="components.userComboBox" dataProvider="{users}" color="0x000000" selectedIndex="0"> <s:layout> <s:HorizontalLayout/> </s:layout> </s:ComboBox> </mx:FormItem> <mx:FormItem label="联动:" paddingTop="20" paddingBottom="0" > <mx:ComboBox id="cb1" dataProvider="{myXML.parent}" labelField="@name"/> <mx:ComboBox id="cb2" dataProvider="{cb1.selectedItem.child}" labelField="@name"/> </mx:FormItem> </s:VGroup> </mx:VBox > </s:Application>
userComboBox.mxml:
<?xml version="1.0" encoding="utf-8"?> <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" autoDrawBackground="true" height="125"> <s:states> <s:State name="normal" /> <s:State name="hovered" /> <s:State name="selected" /> </s:states> <s:Rect left="0" right="0" top="0" bottom="0"> <s:fill> <s:SolidColor color="0x999999" alpha="0" alpha.hovered="0.2" alpha.selected="0.6" /> </s:fill> </s:Rect> <s:VGroup height="122"> <mx:Image source="{data.imageurl}" width="90" height="90"/> <s:Label text="{data.data}" height="30"/> </s:VGroup> </s:ItemRenderer>