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>