0
点赞
收藏
分享

微信扫一扫

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>

 

 

举报

相关推荐

0 条评论