Flex中通过设置iconField下的dropdown属性设置ComboBox控件下拉菜单项目图标的例子

By Minidxer | July 27, 2008

和前面的Flex中如何在List控件中添加图标(icon)使每个项目都显示相应图标的例子类似的，接下来的例子演示了Flex中通过设置iconField下的dropdown属性，设置ComboBox控件下拉菜单项目图标。

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


下面是完整实现代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.events.FlexEvent;
  10.  
  11.             [Bindable]
  12.             [Embed(source="assets/bulletCheck.png")]
  13.             public var BulletCheck:Class;
  14.  
  15.             [Bindable]
  16.             [Embed(source="assets/bulletWarning.png")]
  17.             public var BulletWarning:Class;
  18.  
  19.             [Bindable]
  20.             [Embed(source="assets/bulletCritical.png")]
  21.             public var BulletCritical:Class;
  22.  
  23.             private function init():void {
  24.                 comboBox.dropdown.iconField = "icon";
  25.             }
  26.         ]]>
  27.     </mx:Script>
  28.  
  29.     <mx:ComboBox id="comboBox"
  30.             rowCount="4"
  31.             width="200"
  32.             themeColor="haloSilver"
  33.             textIndent="5"
  34.             selectedIndex="-1"
  35.             prompt="Please select an item..."
  36.             creationComplete="init()">
  37.         <mx:dataProvider>
  38.             <mx:Array>
  39.                 <mx:Object label="Item 1" icon="BulletWarning" />
  40.                 <mx:Object label="Item 2" icon="BulletCritical" />
  41.                 <mx:Object label="Item 3" icon="BulletCritical" />
  42.                 <mx:Object label="Item 4" icon="BulletCheck" />
  43.                 <mx:Object label="Item 5" icon="BulletWarning" />
  44.                 <mx:Object label="Item 6" icon="BulletCheck" />
  45.                 <mx:Object label="Item 7" icon="BulletCheck" />
  46.                 <mx:Object label="Item 8" icon="BulletCritical" />
  47.             </mx:Array>
  48.         </mx:dataProvider>
  49.     </mx:ComboBox>
  50.  
  51. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: , , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads