Flex 4.6带图标的DropDownlist

Question

我有一些问题可以通过图标左侧的条目做一个简单的下拉列表。 我已经完成了itemRenderer部分，所以当我打开下拉列表时，一切都很好。我有问题，与主要的皮肤：

<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.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>never</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"> 

     <!--- @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> 

     <!-- 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> 
      <!--- 
       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" itemRenderer="spark.skins.spark.DefaultItemRenderer"> 
       <s:layout> 
        <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="1" requestedMaxRowCount="6"/> 
       </s:layout> 
      </s:DataGroup> 
     </s:Scroller> 
    </s:Group> 
</s:PopUpAnchor> 

<!--- The default skin is DropDownListButtonSkin. 
     @copy spark.components.supportClasses.DropDownListBase#openButton 
     @see spark.skins.spark.DropDownListButtonSkin --> 
<s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false" tabEnabled="false" 
    skinClass="spark.skins.spark.DropDownListButtonSkin" /> 

<!--- @copy spark.components.DropDownList#labelDisplay 
<s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1" 
    mouseEnabled="false" mouseChildren="false" 
    left = "7" right = "30" top = "2" bottom = "2" width = "75" verticalCenter = "1"/> --> 

<s:HGroup left="5" right="30" top="2" bottom="2" verticalAlign="middle" verticalCenter="1" paddingTop="5" paddingBottom="5"> 
    <s:BitmapImage id="bitmapIcon" top="0" width="34" height="34" source="{hostComponent.selectedItem.icon}"/> 
    <s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1" mouseEnabled="false" mouseChildren="false" left="3" right="30" top="2" bottom="2" verticalCenter="1" /> 
</s:HGroup> 

最重要的部分是：

<s:HGroup left="5" right="30" top="2" bottom="2" verticalAlign="middle" verticalCenter="1" paddingTop="5" paddingBottom="5"> 
    <s:BitmapImage id="bitmapIcon" top="0" width="34" height="34" source="{hostComponent.selectedItem.icon}"/> 
    <s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1" mouseEnabled="false" mouseChildren="false" left="3" right="30" top="2" bottom="2" verticalCenter="1" /> 
</s:HGroup> 

的 “hostComponent.selectedItem.icon” 不要再在柔性4.6工作，我有这样的警告： 警告：无法绑定到'Object'类的属性'图标'（类不是IEventDispatcher）

我不知道如何设置其他方式的价值...

Answer 1

确定我想我找到了......

我要创建例如自定义类DropDownListIcon，与[绑定] public var icon：Class;

我覆盖selectedItem并设置图标。

override public function set selectedItem(value:*):void 
    { 
     super.selectedItem = value; 
     if (value) icon = value.icon; 
    } 

而在DropDownListSkin中，我从hostComponent获取图标。

<s:BitmapImage id="bitmapIcon" top="0" width="34" height="34" source="{hostComponent.icon}"/>