怎么在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;