Flex控件ComboBox绑定数据

ComboBox控件使用dataProvider定义下拉列表的值。dataProvider的类型可以是Array、XML或者是ICollectionView。这里monthCombo的dataProvider是一个包含十二个月份的Array。我们看到，monthCombo的TextInput区域和下拉列表中都显示的是Array中每个Object的label字段的值。其实，ComboBox控件的labelField定义了该控件将选择Object中的哪个字段用作显示。例如，我们改变monthCombo的dataProvider为XML，于是，我们需要修改monthCombo的labelField属性，让其显示XML的属性值@name。

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

[Bindable]

private var monthsList:XML = <root>

</root>;

]]>

</mx:Script>

<mx:ComboBox id="monthCombo" labelField="@name" dataProvider="{monthsList.children()}"/>

</mx:Application>

当ComboBox的editable属性设为true时，用户可以直接在TextInput区域中输入值。相反，如果editable属性为false，则用户只能从下拉列表中选取一个值。这时候，如果用户在TextInput区域键入值，ComboBox的下拉列表会打开，下拉列表中的每个值都会和用户键入的值进行比对，只比对值的首字母，如果找到匹配的值，下拉列表会滚动到那个值。

让我们看看如何创建上面的月份ComboBox吧。

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

[Bindable]

private var monthsList:Array = [{label:"Jan", data:0},

{label:"Feb", data:1},

{label:"Mar", data:2},

{label:"Apr", data:3},

{label:"May", data:4},

{label:"Jun", data:5},

{label:"Jul", data:6},

{label:"Aug", data:7},

{label:"Sep", data:8},

{label:"Oct", data:9},

{label:"Nov", data:10},

{label:"Dec", data:11}];

]]>

</mx:Script>

<mx:ComboBox id="monthCombo" dataProvider="{monthsList}"/>

</mx:Application>

如果用户更改了下拉列表的选项，ComboBox的selectedIndex和selectedItem都会随之更改。selectedIndex记录了用户当前选择的是第几项，selectedItem记录了用户当前选择的Object。并且，ComboBox会抛出change事件，我们只要监听change事件，就能在用户更改了选择的时候做出反应。

<mx:Script>

<![CDATA[

private function onChange():void {

trace("selectedIndex:" + monthCombo.selectedIndex + " selectedItem:" + monthCombo.selectedItem.label);

}

]]>

</mx:Script>

<mx:ComboBox id="monthCombo" dataProvider="{monthsList}" change="onChange()"/>

如果想指定monthCombo的默认选项，比如，在打开monthCombo后，它就选中了八月，那么我们需要显示的设定ComboBox的selectedIndex或者selectedItem值。

<mx:Script>

<![CDATA[

private function createHandler():void {

① monthCombo.selectedIndex = 7;

② monthCombo.selectedItem = monthsList[7];

}

]]>

</mx:Script>

<mx:ComboBox id="monthCombo" dataProvider="{monthsList}" change="onChange()" creationComplete="createHandler()"/>

①和②的方法，选择其中之一就可以达到设定8月为默认选项的工作。

我想强调一下上面监听的creationComplete事件，该事件是在控件，包括控件的所有子孙控件都已经创建完毕并且画在了视图上后抛出的（Dispatched when the component, and all of its child components, and all of their children, and so on have been created, laid out, and are visible）。我们在creationComplete事件的处理方法中，可以完成控件的其它初始化工作。在抛出creationComplete事件前，控件还会先抛出一个initialize事件。在抛出initialize事件时，控件的所有属性都已经准备完毕，但是还没有被画出来。也就是说，在抛出initialize事件时，控件的updateDisplayList方法还没有调用过。

不知道你注意到没有，如果我们不设定ComboBox的默认选项，ComboBox总是默认显示第一项。这其实是因为当我们没有设定ComboBox的selectedIndex属性时，也没有设定prompt属性时，ComboBox会将selectedIndex调整为0。因此，就默认显示第一项了。prompt属性是什么？它指定了当ComboBox的selectedIndex=-1时，在TextInput区域显示的字符串，比如：”Select one…”。

呵呵～自己写了和httpservice的数据绑定例子如下：

<?xml version="1.0" encoding="utf-8"?>

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute"

width="730" height="416"

title="部门管理" fontSize="12"

creationComplete="init();">

<mx:Script>

<![CDATA[

import mx.managers.PopUpManager;

import mx.collections.ArrayCollection;

import mx.rpc.events.FaultEvent;

import mx.rpc.events.ResultEvent;

import mx.controls.Alert;

[Bindable]

private var arrColl:ArrayCollection = new ArrayCollection();

private var monthsList:ArrayCollection = new ArrayCollection();

private function init():void

{

bmglService.send();

jgglService.send();

}

//与服务器通信失败

public function faultHandle(event:FaultEvent):void{

Alert.show("信息发送失败");

}

//正常通信并且返回结果

public function resultHandle(event:ResultEvent):void{

if(bmglService.request != null && bmglService.lastResult !=""){

arrColl = bmglService.lastResult.Info.DepartInfo;

monthsList = jgglService.lastResult.Info.BranchInfo;

}

//关闭窗口

private function closeWindow():void{

PopUpManager.removePopUp(this);

}

private function onChange():void {

Alert.show("selectedDate:" + cbbBranchId. + " selectedItem:" + cbbBranchId.selectedItem);

}

]]>

</mx:Script>

<mx:HTTPService id="bmglService"

url="/flex_OfficeAutomation/depart.do?op=doSelectAll"

result="resultHandle(event)"

fault="faultHandle(event)"

method="post">

</mx:HTTPService>

<mx:HTTPService id="jgglService"

url="/flex_OfficeAutomation/branch.do?op=doSelectAll"

result="resultHandle(event)"

fault="faultHandle(event)"

method="post">

</mx:HTTPService>

<mx:TabNavigator x="10" y="10" width="690" height="354">

<mx:Canvas label="所有部门" width="100%" height="100%">

<mx:DataGrid x="0" y="24" width="688" height="203" id="dataGrid" dataProvider="{arrColl}">

<mx:columns>

<mx:DataGridColumn headerText="部门ID" dataField="DepartId" width="50"/>

<mx:DataGridColumn headerText="部门名称" dataField="DepartName"/>

<mx:DataGridColumn headerText="部门负责人" dataField="PrincipalUser"/>

<mx:DataGridColumn headerText="联系电话" dataField="ConnectTelNo"/>

<mx:DataGridColumn headerText="移动电话" dataField="ConnectMobileTelNo"/>

<mx:DataGridColumn headerText="传真" dataField="Faxes"/>

<mx:DataGridColumn headerText="所属机构" dataField="BranchName"/>

</mx:columns>

</mx:DataGrid>

<mx:Button x="609" y="285" label="关闭" click="closeWindow()"/>

</mx:Canvas>

<mx:Canvas label="添加部门" width="100%" height="100%">

<mx:Label x="222" y="21" text="部门名称："/>

<mx:Label x="210" y="58" text="部门负责人："/>

<mx:Label x="222" y="101" text="联系电话："/>

<mx:Label x="222" y="139" text="移动电话："/>

<mx:Label x="222" y="178" text="部门传真："/>

<mx:Label x="222" y="218" text="所属机构："/>

<mx:Button x="377" y="270" label="确认添加"/>

<mx:TextInput x="295" y="19" id="txtDepartName"/>

<mx:TextInput x="295" y="176" id="txtFaxes"/>

<mx:TextInput x="295" y="56" id="txtPrincipalUser"/>

<mx:TextInput x="295" y="99" id="txtConnectTelNo"/>

<mx:TextInput x="295" y="137" id="txtConnectMobileTelNo"/>

<mx:ComboBox x="295" y="215" id="cbbBranchId" labelField="name" dataProvider="{monthsList}" change="onChange()" height="24"/>

</mx:Canvas>

</mx:TabNavigator>

</mx:TitleWindow>