为combo box添加默认值

最新推荐文章于 2024-10-12 07:46:51 发布

原创最新推荐文章于 2024-10-12 07:46:51 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#button #application #object #encoding #function #layout

本文介绍如何使用Flex中的ComboBox组件，并展示了如何初始化ComboBox以显示特定的提示信息，以及如何通过selectedIndex和selectedItem来控制默认选中的项。

默认情况下，combo box显示的是dataprovider的第一个值。但我们想显示一个提示之类的信息，比如"请选择一个选项"。
这时候如果通过修改dataprovider去实现会很恶心。有一个简单的方法--将他的prompt属性设为"请选择一个选项"就行了。
当然要保证它的selectedIndex = -1

可以通过设置selectedIndex值为-1来使得ComboBox的重新显示提示信息！

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object abbrev="AL" name="Alabama" />
        <mx:Object abbrev="AK" name="Alaska" />
        <mx:Object abbrev="AZ" name="Arizona" />
        <mx:Object abbrev="AR" name="Arkansas" />
        <mx:Object abbrev="CA" name="California" />
        <mx:Object abbrev="CO" name="Colorado" />
        <mx:Object abbrev="CT" name="Connecticut" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="button"
                label="Reset ComboBox"
                click="comboBox.selectedIndex = -1;" />
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            labelField="name"
            prompt="Please select a state..." />

</mx:Application>
当然你可以用AS来实现上述的功能

<?xml version="1.0" encoding="utf-8"?>  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white" initialize="init();"> <mx:Script> <![CDATA[ import mx.controls.ComboBox; import mx.controls.Button; import mx.containers.ApplicationControlBar; private var arr:Array; private var appControlBar:ApplicationControlBar; private var button:Button; private var comboBox:ComboBox; private function init():void { arr = []; arr.push({abbrev:"AL", name:"Alabama"}); arr.push({abbrev:"AK", name:"Alaska"}); arr.push({abbrev:"AZ", name:"Arizona"}); arr.push({abbrev:"AR", name:"Arkansas"}); arr.push({abbrev:"CA", name:"California"}); arr.push({abbrev:"CO", name:"Colorado"}); arr.push({abbrev:"CT", name:"Connecticut"}); button = new Button(); button.label = "Reset ComboBox"; button.addEventListener(MouseEvent.CLICK, button_click); appControlBar = new ApplicationControlBar(); appControlBar.dock = true; appControlBar.addChild(button); Application.application.addChildAt(appControlBar, 0); comboBox = new ComboBox(); comboBox.dataProvider = arr; comboBox.labelField = "name"; comboBox.prompt = "Please select a state..."; addChild(comboBox); } private function button_click(evt:MouseEvent):void { comboBox.selectedIndex = -1; } ]]> </mx:Script> </mx:Application>

============================

我的页面上又一个ComboBox组件，如下

<mx:itemRenderer>
<mx:Component>
<mx:ComboBox
dataProvider="{data.vlanGroupIdList}"
selectedIndex="{data.selectedIndex}"
change="outerDocument.changeHandler(data.ringId, this.value.toString())"/>
</mx:Component>

</mx:itemRenderer>

通过DEBUG可以看见data.vlanGroupIdList和data.selectedIndex的值如下：

data.vlanGroupIdList是一个ArrayCollection，里面又“1”，“2”两个值，“1”在[0]的位置， “2”在[1]的位置
data.selectedIndex的值是 1

现在的问题是我的画面显示出来后ComboBox 默认选中的是1 而不是2
selectedIndex = 1的时候难道默认选中的不是2吗？

=========================

用selectedIndex也可以的啊，循环数据源，找到index，例如：
for(var i:int = 0, nLen:int = xml.children().length(); i < nLen; i++)
{
var employee:XML = xml.employee[i];
if("商品5" == employee.name[0].text().toXMLString)
combobox.selectedIndex = i;
break;
}
如果用selectedItem，则循环数据源（推荐）
for each(var employee:XML in combobox.dataProvider)
{
if("商品5" == employee.name[0].text().toXMLString)
combobox.selectedItem = employee;
break;
}