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为文件名