Flex DropDownList控件功能 (

Flex DropDownList控件功能 (2010-07-31 22:16)

分类： Flex组件

1 DropDownList控件概述

DropDownList 控件包含下拉列表，用户可从中选择单个值。其功能与 HTML 中 SELECT 表单元素的功能非常相似。

DropDownList 控件由锚点按钮、提示区域和下拉列表组成，使用锚点按钮可打开和关闭下拉列表。提示区域显示一个提示 String，或者显示下拉列表中的选定项目。

打开下拉列表时：

• 单击锚点按钮会关闭下拉列表并提交当前选定的数据项目。
• 在下拉列表之外单击会关闭下拉列表并提交当前选定的数据项目。
• 在某个数据项目上单击会选中该项目并关闭下拉列表。

[1]参考文献：Adobe官方参考文档：

http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/spark/components/DropDownList.html#eventSummary

2 DropDownList控件常用属性和方法

名称	分类	说明
requireSelection：Boolean	属性	如果为 true，则必须始终在控件中选中数据项目并且始终将selectedIndex 属性设置0和(dataProvider.length - 1) 之间的一个值。默认值为 false。（实例详见3.3）
selectedIndex：int	属性	选中项目的基于 0 的索引；或者如果未选中项目，则为基于 -1 的索引。该值始终在 -1 和 (dataProvider.length - 1) 之间(实例详见3.3)
Prompt：string	属性	在未选择任何一项时提示区域显示的文本, 提示是当 selectedIndex = -1 时在 DropDownList 中显示的 String（实例详见3.2）
dataProvider	属性	此 DataGroup 的数据提供程序。它必须为 IList。 在 Flex 框架中包含多个 IList 实现，包括 ArrayCollection、ArrayList 和 XMLListCollection。 此属性可用作数据绑定的源。（实例详见3.2）
itemRenderer（待查）[2]	属性	用于数据项目的项呈示器。该类必须实现 IDataRenderer 接口。如果已定义，则 itemRendererFunction 属性优先于此属性。
alpha :Number	属性	指示指定对象的 Alpha 透明度值。有效值为 0（完全透明）到 1（完全不透明）。默认值为 1。alpha 设置为 0 的显示对象是活动的，即使它们不可见。（实例详见3.4）
labelField :String	属性	数据提供的项目中作为标签显示的字段名称（实例详见3.2）
Change	事件	所选内容已更改后分派（实例详见3.2）
imeStartComposition（待查）	事件	此事件被调度到任何支持使用 IME 进行内联输入的客户端应用程序

[2]可参考 Flex Gumbo中如何通过itemRenderer属性，在DropDownList中显示图片http://blog.minidx.com/2009/08/13/2832.html

3 DropDownList控件的基本用法

3.1 定义DropDownList的数据源

1.DataProvider为DropDownList提供下拉菜单的数据，其可以是ArrayCollection类型的。

在As3.0代码中定义一个数据源，代码如下：

public var myDP:ArrayCollection = new ArrayCollection(

[ {product:"Flex", price:100},

{product:"Air", price:200},

{product:"Catalyst", price:300},

{product:"FlashBuilder", price:400} ]);

3.2 在Lable标签中显示在下拉列表中选中的数据

1.在MXML代码中定义一个DropDownListc控件并且同时定义Lable标签用于显示被选择的数据。

代码如下：

<!-- Text components used to display current selection and price -->

<s:Label id="currSel" text="产品名 =" x="86" y="119"/>

<s:Label id="currPrc" text="价格 = $" x="85" y="219"/>

<!-- DropDownList will call the updateSelection function when the

selectionChanged event is dispatched -->

<s:DropDownList id="myDDL"

width="200" dataProvider="{myDP}"

labelField="product"

change="updateSelection(event);" x="241" y="72" prompt="请选择"/>

2.定义了一个change事件如果在下拉菜单中选择了任何一项，则会启动updateSelection函数其会在Lable中显示选择的内容

updateSelection函数的定义如下：

privatefunction updateSelection(e:IndexChangeEvent):void

{

currSel.text = "产品名 = " + myDDL.selectedItem.product;

currPrc.text = "价格 = $" + myDDL.selectedItem.price;

}

3.3 对requireSelection属性与selectedIndex的理解

1. requireSelection的默认值为false，我们将其设置为true来看看效果，如3.1一样我们将myDP设定为数据源

代码如下：

<s:DropDownList x="160" y="90" width="202" height="26" requireSelection="true" dataProvider="{myDP}"labelField="product" prompt="请选择：" id="dl” change="dropdownlist1_changeHandler(event)"></s:DropDownList>

还定义一个Lable标签用来显示selectIndex值的变化

代码如下：

<s:Label x="164" y="190" text="标签" width="147" height="22" id="lb"/>

定义一个change事件当所选内容已更改后分派实现输出selectIndex的值

代码如下：

protectedfunction dropdownlist1_changeHandler(event:IndexChangeEvent):void

{

lb.text="selectIndex的值是"+dl.selectedIndex;

}

（我们可以看到由于设置requireSelection的值为true，那么selectedIndex的值就只0和(dataProvider.length - 1) 之间的取值，而prompt属性的内容是在selectedIndex值为-1时显示，故当requireSelection的值为true时，prompt的内容永远不会显示。）

3.4 属性的实例

指示指定对象的 Alpha 透明度值。有效值为 0（完全透明）到 1（完全不透明）。默认值为 1，我们设置其值为0.5来看看效果。

代码如下：

<s:DropDownList x="101" y="121" width="153" height="28" alpha="0.5"></s:DropDownList>