FLEX4实践—DropDownList与ComboBox

FLEX4 相对 FLEX3的组件变化列表中列出以这么一项：

mx.controls.ComboBox      ->    spark.components.DropDownList

官方解释如下：

    ComboBox 控件是 DropDownListBase 控件的子类。与 DropDownListBase 控件类似，当用户从 ComboBox 控件的下拉列表中选择某项时，数据项将显示在控件的提示区域中。

    这两个控件之间的一个区别是，ComboBox 控件的提示区域是使用 TextInput 控件实现的，而 DropDownList 控件是通过 Label 控件实现的。因此，用户可以编辑控件的提示区域，以输入非预定义选项之一的值。

    例如，DropDownList 控件仅允许用户从控件的预定义项列表中进行选择。ComboBox 控件允许用户既可以从预定义项中选择，也可以在提示区域中输入新项。您的应用程序可以识别已输入一个新项，（可选）并将其添加到控件的项列表中。

ComboBox 控件还可以当用户在提示区域中输入字符时搜索项列表。当用户输入字符时，将打开控件的下拉区域，然后滚动到项列表中最接近的匹配项并加亮。

今天在测试使用<s:ComboBox dataProvider="{provider}" labelField="label"/>时发现编译没报错，但运行后却始终也显示不出控件。上网搜了一下，发现原来控件被替换了。

针对FLEX3中ComboBox的用法，在FLEX4中应改成以下用法：

<s:DropDownList dataProvider="{provider}" labelField="label"/>

或

<mx:ComboBox dataProvider="{provider}" labelField="label"/>

需要注意的是：

1）DropDownList的DataProvider不能是Array类型的

2）DropDownList默认显示时与ComboBox不一样，需要手动指定 selectedIndex的值

下面给出一段示例：

<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="955" minHeight="600" creationComplete="init()">
	
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<fx:Array id="queryField">
			<fx:Object dataField="requestStatuId"  headerText="RequestId"/>
			<fx:Object dataField="executeName"  headerText="ExecuteName"/>
			<fx:Object dataField="executeCode" headerText="ExecuteCode"/>
		</fx:Array>
		<s:ArrayList id="queryField1">
			<fx:Object dataField="requestStatuId"  headerText="RequestId"/>
			<fx:Object dataField="executeName"  headerText="ExecuteName"/>
			<fx:Object dataField="executeCode" headerText="ExecuteCode"/>
		</s:ArrayList>
	</fx:Declarations>
	<s:Panel x="448" y="159" width="250" height="200">
		<mx:ComboBox x="73" y="10" dataProvider="{queryField}" labelField="headerText" selectedIndex="0"/>
		<s:DropDownList x="73" y="50" dataProvider="{queryField1}" labelField="headerText" selectedIndex="0"/>
	</s:Panel>
</s:Application>