flex 4橫向帶圖下拉列表和聯動下拉列表

Java代碼

<pre name="code" class="plain">

</pre>

<?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>  

註釋：itemRenderer="components.userComboBox"中，components爲包名，userComboBox爲文件名