ComboBox 显示icon

       spark中ComboBox默认渲染器是一个label，如果想修改显示方式，可以通过在skinClass来实现，默认的渲染器是DefaultItemRenderer。

 

 

              MyComboBox.mxml

     

<?xml version="1.0" encoding="utf-8"?>
<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

--> 
<!--- The default skin class for the Spark ComboBox component. 
The skin for the anchor button for a ComboBox component 
is defined by the ComboBoxButtonSkin class.  The skin for the text input
is defined by the ComboBoxTextInputSkin class.

@see spark.components.ComboBox        
@see spark.skins.spark.ComboBoxButtonSkin

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<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"> 
    
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        /** 
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
        */
        [HostComponent("spark.components.ComboBox")]
        ]]>
    </fx:Metadata> 
    
	<!--
		NOTE: this skin file contains sub-parts that may continue to react to
		Style code.  To remove this behavior create new copies of those skins
		and remove the styles.
	-->
    <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">
            
            <!-- 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>                                     
									<s: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" tabEnabled="false" />  
    <!--- @copy spark.components.ComboBox#textInput -->
    <s:TextInput id="textInput" enabled.disabled="false"
                 left="0" right="18" top="0" bottom="0" 
                 skinClass="spark.skins.spark.ComboBoxTextInputSkin"/> 
    
</s:SparkSkin>

 

 

    Application.mxml

 

<s:ComboBox skinClass="org.sdp.skins.MyComboBox">                 
		<s:dataProvider>                    
			<s:ArrayList>                         
				<fx:Object label="AIR" icon="{imgCls}"/>    
				<fx:Object label="ColdFusion"  icon="{imgCls2}"/>          
				<fx:Object label="Dreamweaver" icon="{imgCls}"/>           
				<fx:Object label="Flash"  icon="{imgCls2}"/>                         
				<fx:Object label="Flex"   icon="{imgCls}"/>                         
				<fx:Object label="Photoshop" icon="{imgCls2}"/>                     
			</s:ArrayList>                 
		</s:dataProvider>             
	</s:ComboBox>