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) |
|
|
选中项目的基于 0 的索引;或者如果未选中项目,则为基于 -1 的索引。该值始终在 -1 和 ( |
|
Prompt:string |
在未选择任何一项时提示区域显示的文本,提示是当 selectedindex = -1 时在 DropDownList 中显示的 String(实例详见3.2) |
|
dataProvider |
此 DataGroup 的数据提供程序。它必须为 IList。 在 Flex 框架中包含多个 IList 实现,包括 ArrayCollection、ArrayList 和 XMLListCollection。 此属性可用作数据绑定的源。(实例详见3.2) |
|
itemRenderer(待查)[2] |
用于数据项目的项呈示器。该类必须实现 IDataRenderer 接口。如果已定义,则 itemRendererFunction 属性优先于此属性。 |
|
指示指定对象的 Alpha 透明度值。有效值为 0(完全透明)到 1(完全不透明)。默认值为 1。alpha 设置为 0 的显示对象是活动的,即使它们不可见。(实例详见3.4) |
||
Change |
事件 |
所选内容已更改后分派(实例详见3.2) |
事件 |
此事件被调度到任何支持使用 IME 进行内联输入的客户端应用程序 |
[2]可参考 Flex Gumbo中如何通过itemRenderer属性,在DropDownList中显示图片http://blog.minidx.com/2009/08/13/2832.html
3 DropDownList控件的基本用法
3.1 定义DropDownList的数据源
1.DataProvider为DropDownList提供下拉菜单的数据,其可以是ArrayCollection类型的。
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。