带图标的Combox、Dropdownlist

SKin

<?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[ 
        [HostComponent("spark.components.ComboBox")]
        ]]>
    </fx:Metadata> 
    
    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>
    
   
    <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">
        
        
        <s:Group id="dropDown" maxHeight="134" minHeight="22" >
            
            <!-- drop shadow -->
            <!--- @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"/>
            
            <!-- border -->
            <!--- @private -->
            <s:Rect id="border" left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <!--- @private -->
                    <s:SolidColorStroke id="borderStroke" weight="1"/>
                </s:stroke>
            </s:Rect>
            
            <!-- fill -->
            <!--- Defines the appearance of drop-down list's background fill. -->
            <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
                <s:fill>
                    <!---  
                        @private
                        The color of the drop down's background fill.
                        The default color is 0xFFFFFF.
                    -->
                    <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">
                <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
                <s:DataGroup id="dataGroup" >
                    <s:layout>
                        <s:VerticalLayout gap="10" horizontalAlign="contentJustify"/>
                    </s:layout>
					<s:itemRenderer>
						<fx:Component>
							<s:ItemRenderer >
								<s:Group>
									<s:layout>
										<s:HorizontalLayout verticalAlign="middle" paddingLeft="5"/>       
									</s:layout>
									<mx:Image source="{data.icon}" />
									<s:Label text="{data.label}" width="100" fontWeight="bold" paddingTop="5" paddingLeft="5"/>
									
								</s:Group>
							</s:ItemRenderer>
							
						</fx:Component>
					</s:itemRenderer>
                </s:DataGroup> 
            </s:Scroller>
        </s:Group>
    </s:PopUpAnchor>
    
    <!---  The default skin is ComboBoxButtonSkin. 
            @copy spark.components.supportClasses.DropDownListBase#openButton
            @see spark.skins.spark.ComboBoxButtonSkin -->
    <s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false"
              skinClass="spark.skins.spark.ComboBoxButtonSkin" />  
    <!--- @copy spark.components.ComboBox#textInput -->
    <s:TextInput id="textInput"
                 left="0" right="18" top="0" bottom="0" 
                 skinClass="spark.skins.spark.ComboBoxTextInputSkin"/> 
    
</s:SparkSkin>

 MAIN

<?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"
			   viewSourceURL="srcview/index.html">
	<fx:Script>
		<![CDATA[
			import spark.events.IndexChangeEvent;
			[Bindable]
			[Embed("assets/art.png")]
			private var art:Class;

			[Bindable]
			[Embed("assets/dev.png")]
			private var dev:Class;

			protected function combobox_changeHandler(event:IndexChangeEvent):void
			{
				var temp:*=ComboBox(event.target).selectedItem;
				if (temp is String)
				{
					this.resultLabel.text=ComboBox(event.target).selectedItem;
				}
				else
				{
					this.resultLabel.text=ComboBox(event.target).selectedItem.label;
				}
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout verticalAlign="middle"
						  horizontalAlign="center"/>
	</s:layout>
	<s:VGroup>
		<s:Label width="50%"
				 id="resultLabel"
				 text="Please Select!!"/>
		<s:HGroup>
			<s:ComboBox change="combobox_changeHandler(event)">
				<s:dataProvider>
					<s:ArrayList>
						<fx:String>AIR</fx:String>
						<fx:String>ColdFusion</fx:String>
						<fx:String>Dreamweaver</fx:String>
						<fx:String>Flash</fx:String>
						<fx:String>Flex</fx:String>
						<fx:String>Photoshop</fx:String>
					</s:ArrayList>
				</s:dataProvider>
			</s:ComboBox>
			<s:ComboBox change="combobox_changeHandler(event)"
						skinClass="skins.MyComboBoxSkin">
				<s:dataProvider>
					<s:ArrayList>
						<fx:Object label="AIR"
								   icon="{dev}"/>
						<fx:Object label="ColdFusion"
								   icon="{dev}"/>
						<fx:Object label="Dreamweaver"
								   icon="{art}"/>
						<fx:Object label="Flash"
								   icon="{art}"/>
						<fx:Object label="Flex"
								   icon="{dev}"/>
						<fx:Object label="Photoshop"
								   icon="{art}"/>
					</s:ArrayList>
				</s:dataProvider>
			</s:ComboBox>
		</s:HGroup>
	</s:VGroup>
</s:Application>