Flex Gumbo中如何通过itemRenderer属性DropDownList中显示图片的例子

By Minidxer | August 13, 2009

接下来的例子演示了Flex Gumbo中如何通过itemRenderer属性，DropDownList中显示图片。

让我们先来看一下Demo（可以点击这里察看源代码）：


下面是完整代码(或点击这里察看)：
下面是main.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Spark_DropDownList_itemRenderer_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns:mx="library://ns.adobe.com/flex/halo">
  6.  
  7.     <s:DropDownList id="dropDownList"
  8.             labelField="label"
  9.             requireSelection="true"
  10.             skinClass="skins.CustomDropDownListSkin"
  11.             itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
  12.             horizontalCenter="0"
  13.             top="20">
  14.         <s:dataProvider>
  15.             <s:ArrayList>
  16.                 <s:BitmapImage source="@Embed('assets/air_appicon-tn.gif')" />
  17.                 <s:BitmapImage source="@Embed('assets/cf_appicon-tn.gif')" />
  18.                 <s:BitmapImage source="@Embed('assets/dw_appicon-tn.gif')" />
  19.                 <s:BitmapImage source="@Embed('assets/fl_appicon-tn.gif')" />
  20.                 <s:BitmapImage source="@Embed('assets/fl_player_appicon-tn.gif')" />
  21.                 <s:BitmapImage source="@Embed('assets/fw_appicon-tn.gif')" />
  22.                 <s:BitmapImage source="@Embed('assets/fx_appicon-tn.gif')" />
  23.                 <s:BitmapImage source="@Embed('assets/ai_appicon-tn.gif')" />
  24.             </s:ArrayList>
  25.         </s:dataProvider>
  26.     </s:DropDownList>
  27.  
  28. </s:Application>

下面是skins/CustomDropDownListSkin.mxml的代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Skin name="CustomDropDownListSkin"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         alpha.disabled="0.5"> 
  6.     <!-- states -->
  7.     <s:states>
  8.         <s:State name="normal" />
  9.         <s:State name="open" />
  10.         <s:State name="disabled" />
  11.     </s:states>
  12.  
  13.     <!-- host component -->
  14.     <fx:Metadata>
  15.     <![CDATA[
  16.         [HostComponent("spark.components.DropDownList")]
  17.     ]]>
  18.     </fx:Metadata> 
  19.  
  20.     <!--- The PopUpAnchor control that opens the drop-down list. -->
  21.     <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
  22.             left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
  23.             popUpPosition="below" popUpWidthMatchesAnchorWidth="true">
  24.  
  25.         <!--- The drop down area of the skin. This includes borders, background colors, scrollers, and filters. -->
  26.         <s:Group id="dropDown" maxHeight="134" minHeight="22" >
  27.  
  28.             <!-- drop shadow -->
  29.             <s:RectangularDropShadow blurX="20" blurY="20" alpha="1.0" distance="5" 
  30.                  angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
  31.  
  32.             <!-- border -->
  33.             <s:Rect left="0" right="0" top="0" bottom="0">
  34.                 <s:stroke>
  35.                     <s:SolidColorStroke color="0x686868" weight="1"/>
  36.                 </s:stroke>
  37.             </s:Rect>
  38.  
  39.             <!-- fill -->
  40.             <!--- Defines the appearance of drop-down list's background fill. -->
  41.             <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
  42.                 <s:fill>
  43.                     <!--- The color of the drop down's background fill. The default color is 0xFFFFFF. -->
  44.                     <s:SolidColor id="bgFill" color="0xFFFFFF" />
  45.                 </s:fill>
  46.             </s:Rect>
  47.  
  48.             <s:Scroller left="0" top="0" right="0" bottom="0" focusEnabled="false" minViewportInset="1">
  49.                 <!--- The container for the data items in the drop-down list. -->
  50.                 <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
  51.                     <s:layout>
  52.                         <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
  53.                     </s:layout>
  54.                 </s:DataGroup>
  55.             </s:Scroller>
  56.         </s:Group>
  57.     </s:PopUpAnchor>
  58.  
  59.     <!--- The anchor button used by the DropDownList. The default skin is DropDownListButtonSkin. -->
  60.     <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
  61.             skinClass="spark.skins.spark.DropDownListButtonSkin" /> 
  62.  
  63.     <s:BitmapImage source="{hostComponent.selectedItem.source}"
  64.         left="10" right="30" top="10" bottom="10" />
  65.  
  66. </s:Skin>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: DropDownList, Gumbo | No Comments » | Tags: , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll