flash builder4 就是flex builder3升级后的说法- -感觉更统一了。
直接说官方给出的最新解释吧:
ComboBox 控件是 DropDownListBase 控件的子类。与 DropDownListBase 控件类似,当用户从 ComboBox 控件的下拉列表中选择某项时,数据项将显示在控件的提示区域中。
这两个控件之间的一个区别是,ComboBox 控件的提示区域是使用 TextInput 控件实现的,而 DropDownList 控件是通过 Label 控件实现的。因此,用户可以编辑控件的提示区域,以输入非预定义选项之一的值。
例如,DropDownList 控件仅允许用户从控件的预定义项列表中进行选择。ComboBox 控件允许用户既可以从预定义项中选择,也可以在提示区域中输入新项。您的应用程序可以识别已输入一个新项,(可选)并将其添加到控件的项列表中。
ComboBox 控件还可以当用户在提示区域中输入字符时搜索项列表。当用户输入字符时,将打开控件的下拉区域,然后滚动到项列表中最接近的匹配项并加亮。
注意:基于 Spark List 的控件(Spark ListBase 类及其子类,如 ButtonBar、ComboBox、DropDownList、List 和 TabBar)不支持将 BasicLayout 类作为 layout
属性的值。不要将 BasicLayout 与基于 Spark List 的控件一起使用。
照这个说法
可以直接这样做:
<?xml version="1.0" encoding="utf-8"?>
<!-- 控制 ComboBox 的一个实例 -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]//链接数据的标记
public var complexDP:ArrayCollection = new ArrayCollection(
[ {ingredient:"Salmon", category:"Meat"},
{ingredient:"Potato", category:"Starch"},
{ingredient:"Cucumber", category:"Vegetable"},
{ingredient:"Steak", category:"Meat"},
{ingredient:"Rice", category:"Starch"},
{ingredient:"Cumin", category:"Spice"}
]
);
<!-- 输入自定义字符串的方法myLabelToItemFunction -->
private function myLabelToItemFunction(input:String):*
{
<!-- 返回数据到dataProvider -->
return {ingredient:input, category:"mystery"};
}
]]>
</fx:Script>
<s:Panel title="Spark ComboBox Example" width="75%" height="75%">
<s:layout>
<s:VerticalLayout paddingTop="10" paddingLeft="10"/>
</s:layout>
<!-- 这个标签用来返回cb的值 -->
<s:Label text="Index : {cb.selectedIndex}
Item : {cb.selectedItem.ingredient}
Type : {cb.selectedItem.category}"/>
<!-- 在ComboBox 里面自定义labelToItem -->
<s:ComboBox
id="cb"
dataProvider="{complexDP}"
width="150"
labelToItemFunction="{myLabelToItemFunction}"
selectedIndex="0"
labelField="ingredient"/>
</s:Panel>
</s:Application>
照上面这么写没问题 不过既然官方都说了。
以后用comboBox还是直接用DropDownList吧
官方解释:
DropDownList 控件包含下拉列表,用户可从中选择单个值。其功能与 HTML 中 SELECT 表单元素的功能非常相似。
DropDownList 控件由锚点按钮、提示区域和下拉列表组成,使用锚点按钮可打开和关闭下拉列表。提示区域显示一个提示 String,或者显示下拉列表中的选定项目。
打开下拉列表时:
- 单击锚点按钮会关闭下拉列表并提交当前选定的数据项目。
- 在下拉列表之外单击会关闭下拉列表并提交当前选定的数据项目。
- 在某个数据项目上单击会选中该项目并关闭下拉列表。
- 如果
requireSelection
属性为 false
,则按下 Ctrl 键的同时单击某个数据项目会取消选中该项目并关闭下拉列表。
注意:基于 Spark List 的控件(Spark ListBase 类及其子类,如 ButtonBar、ComboBox、DropDownList、List 和 TabBar)不支持将 BasicLayout 类作为 layout
属性的值。不要将 BasicLayout 与基于 Spark List 的控件一起使用。
顺便给个官方的实例:
<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Spark DropDownList control -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import spark.events.IndexChangeEvent;
[Bindable]
public var myDP:ArrayCollection = new ArrayCollection(
[ {product:"Flex", price:100},
{product:"Air", price:200},
{product:"Catalyst", price:300},
{product:"FlashBuilder", price:400} ]);
private function updateSelection(e:IndexChangeEvent):void
{
currSel.text = "Current Product = " + myDDL.selectedItem.product;
currPrc.text = "Price = $" + myDDL.selectedItem.price;
}
]]>
</fx:Script>
<s:Panel width="75%" height="75%" title="My DropDownList Example"
horizontalCenter="0" verticalCenter="0">
<s:VGroup left="10" right="10" top="10" bottom="10">
<!-- Text components used to display current selection and price -->
<s:Label id="currSel" text="Current Product = -"/>
<s:Label id="currPrc" text="Price = $ -"/>
<!-- DropDownList will call the updateSelection function when the
selectionChanged event is dispatched -->
<s:DropDownList id="myDDL" prompt="Select One"
width="200" dataProvider="{myDP}"
labelField="product"
change="updateSelection(event);"/>
</s:VGroup>
</s:Panel>
</s:Application>
一目了然 哈哈