怎么在DropdownList下面嵌入图片

flex4 的DropdownList下拉框组件本身并不支持下拉框图片，但是可以结合条目渲染器和皮肤使其显示图片。

dropdownlist皮肤代码：

<?xml version="1.0" encoding="utf-8"?><s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled=".5" xmlns:mx="library://ns.adobe.com/flex/mx"><!-- host component --><fx:Metadata><!--[CDATA[ /** * @copy spark.skins.spark.ApplicationSkin#hostComponent */ [HostComponent("spark.components.DropDownList")] ]]></fx:Metadata><fx:Script fb:purpose="styling"><![CDATA[/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */static private const contentFill:Array=["bgFill"];/** * @private */override public function get contentItems():Array{return contentFill};/** * @private*/override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{if (getStyle("borderVisible") == false){if (border)border.visible=false;if (background){background.left=background.top=background.right=background.bottom=0;}if (scroller)scroller.minViewportInset=0;}else{if (border)border.visible=true;if (background){background.left=background.top=background.right=background.bottom=1;}if (scroller)scroller.minViewportInset=1;}if (dropShadow)dropShadow.visible=getStyle("dropShadowVisible");openButton.setStyle("cornerRadius", getStyle("cornerRadius"));if (borderStroke){borderStroke.color=getStyle("borderColor");borderStroke.alpha=getStyle("borderAlpha");}super.updateDisplayList(unscaledWidth, unscaledHeight);}]]--></fx:Script><s:states><s:State name="normal"/><s:State name="open"/><s:State name="disabled"/></s:states><!---The PopUpAnchor control that opens the drop-down list.<p>In a custom skin class that uses transitions, set the<code>itemDestructionPolicy</code> property to <code>none</code>.</p>--><s:PopUpAnchor id="popUp" displayPopUp.normal="false" displayPopUp.open="true" includeIn="open" left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto" popUpPosition="below" popUpWidthMatchesAnchorWidth="true"><!--- This includes borders, background colors, scrollers, and filters. @copy spark.components.supportClasses.DropDownListBase#dropDown--><s:Group id="dropDown" maxHeight="134" minHeight="22"><!--- @private --><s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7" angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/><!--- @private --><s:Rect id="border"left="0"right="0"top="0"bottom="0"><s:stroke><!--- border stroke @private --><s:SolidColorStroke id="borderStroke"weight="1"/></s:stroke></s:Rect><s:Rect id="background"left="1"right="1"top="1"bottom="1"><s:fill><s:SolidColor id="bgFill" color="0xFFFFFF"/></s:fill></s:Rect><!--- @private --><s:Scroller id="scroller"left="0"top="0"right="0"bottom="0"hasFocusableChildren="false"minViewportInset="1"><s:DataGroup id="dataGroup" itemRenderer="bpm.graphic.DropdownlistItemrenderer"><s:layout><s:VerticalLayout gap="0" horizontalAlign="contentJustify"/></s:layout></s:DataGroup></s:Scroller></s:Group></s:PopUpAnchor><s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false" skinClass="spark.skins.spark.DropDownListButtonSkin"/><!--- @copy spark.components.DropDownList#labelDisplay --><mx:Image id="image" left="2" verticalCenter="0" source="{hostComponent.selectedItem.source}"/><s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1" mouseEnabled="false" mouseChildren="false" left="20" right="30" top="2" bottom="2" width="75" verticalCenter="1"/></s:SparkSkin>

条目渲染器：

<?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"creationComplete="itemrenderer1_creationCompleteHandler(event)"><fx:Script><!--[CDATA[import com.benstucki.utilities.IconUtility;import mx.events.FlexEvent;protected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void{trace(data);}]]--></fx:Script><s:HGroup height="30" verticalAlign="middle" ><mx:Image id="image" source="{data.source!=null?data.source:null}"/><s:Label text="{data.label}"/></s:HGroup></s:ItemRenderer>

其使用代码：

positionDDL.setStyle("skinClass", DropdownListSkin);positionArray=new ArrayCollection([{label: "最前", source: "../resources/bringtofront.png"}, {label: "前移", source: "../resources/bringforward.png"}, {label: "后移", source: "../resources/sendbackward.png"}, {label: "最后", source: "../resources/sendtoback.png"}])positionDDL.dataProvider=positionArray;positionDDL.selectedIndex=0;