flex横向带图下拉列表和联动下拉列表

 

 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>