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>