One of the things I like most about ColdFusion's <CFSELECT> tag is the SELECTED attribute, give it a value and it figures out which one to pre-select. The Flex ComboBox allows you to set selectedIndex (the relative element position) but not selectedValue. Actually, ComboBox does have a selectedValue property, but that is used to read the value of the selected item, and can't be used to set the value of the item to be selected.
Coincidentally, while I was working on this, both Scott Stroz and Ray Camden posted solutions to the exact same problem. Scott's solution involved calling a method to set the value, and I really think that the selectedValue property should be used to be consistent with how ComboBox itself works. Ray's solution allows for a property to be set (he defined a new property for this), but his solution would not work for me as my dataProvider was being populated after the control had been created (it is being populated by a call to a CFC).
So, here is my solution. It's bit more complex than what Scott and Ray suggested, but it does support selectedValue, it'll also allow that property to be changed as needed (even after control creation), and it also properly handles delayed dataProvider population.
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private var _selectedValue:String;
private var bSelectedValueSet:Boolean = false;
private var bDataProviderSet:Boolean = false;
// Override committ, this may be called repeatedly
override protected function commitProperties():void
{
// invoke ComboBox version
super.commitProperties();
// If value set and have dataProvider
if (bSelectedValueSet && bDataProviderSet)
{
// Set flag to false so code won't be called until selectedValue is set again
bSelectedValueSet=false;
// Loop through dataProvider
for (var i:int=0;i<this.dataProvider.length;i++)
{
// Get this item's data
var item:String = this.dataProvider[i].data;
// Check if is selectedValue
if(item == _selectedValue)
{
// Yes, set selectedIndex
this.selectedIndex = i;
break;
}
}
}
}
// Trap dataProvider being set
override public function set dataProvider(o:Object):void
{
// invoke ComboBox version
super.dataProvider = o;
// This may get called before dataProvider is set, so make sure not null and has entries
if (o!=null && o.length)
{
// Got it, set flag
bDataProviderSet = true;
}
}
// set for selectedValue
public function set selectedValue(s:String):void
{
// Set flag
bSelectedValueSet = true;
// Save value
_selectedValue = s;
// Invalidate to force commit
invalidateProperties();
}
]]>
</mx:Script>
</mx:ComboBox>
And here is a simple test case:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ns1="*">
<mx:Script>
<![CDATA[
[Bindable]
private var comboData:Array=
[{label:"Item1", data:"1"},
{label:"Item2", data:"2"},
{label:"Item3", data:"3"}];
]]>
</mx:Script>
<ns1:ComboBox2 dataProvider="{comboData}" selectedValue="3" />
</mx:Application>
override protected function commitProperties():void
{
// invoke ComboBox version
super.commitProperties();
// If value set and have dataProvider
if (bSelectedValueSet && bDataProviderSet)
{
// Set flag to false so code won't be called until selectedValue is set again
bSelectedValueSet=false;
// Loop through dataProvider
for (var i:int=0;i<this.dataProvider.length;i++)
{
// Get this item's data
var item:String = this.dataProvider[i][this.data]; //The little change
// Check if is selectedValue
if(item == _selectedValue)
{
// Yes, set selectedIndex
this.selectedIndex = i;
break;
}
}
}
}
In this way , Our value field name of our dataprovider can not be data but the other name.
thank you.
For Xml list
=============================================
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; xmlns:ns2="myComponents.*">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.core.IFlexDisplayObject;
private var helpWindow:IFlexDisplayObject;
private var books:XML = <books>
<book publisher="Addison-Wesley" name="Design Patterns" ids="0"/>
<book publisher="Addison-Wesley" name="The Pragmatic Programmer" ids="1"/>
<book publisher="Addison-Wesley" name="Test Driven Development" ids="2"/>
<book publisher="Addison-Wesley" name="Refactoring to Patterns" ids="3"/>
<book publisher="O'Reilly Media" name="The Cathedral & the Bazaar" ids="4"/>
<book publisher="O'Reilly Media" name="Unit Test Frameworks" ids="5"/>
</books>;
private function his():void {
xselect.selectedValue = "5";
}
]]>
</mx:Script>
<ns2:xmlcmbbox id="xselect" dataProvider="{books.book}" labelField="@name" />
<mx:Button click="his();" label="hiss"/>
</mx:Application>
=============================================================
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml";>
<mx:Script>
<![CDATA[
private var _selectedValue:String;
private var bSelectedValueSet:Boolean = false;
private var bDataProviderSet:Boolean = false;
// Override committ, this may be called repeatedly
override protected function commitProperties():void {
// invoke ComboBox version
super.commitProperties();
// If value set and have dataProvider
if (bSelectedValueSet && bDataProviderSet) {
// Set flag to false so code won't be called until selectedValue is set again
bSelectedValueSet=false;
// Loop through dataProvider
for (var i:int=0;i<this.dataProvider.length;i++){
// Get this item's data
var item:String = this.dataProvider[i].@ids;
// Check if is selectedValue
if(item == _selectedValue) {
// Yes, set selectedIndex
this.selectedIndex = i;
break;
}
}
}
}
// Trap dataProvider being set
override public function set dataProvider(o:Object):void {
// invoke ComboBox version
super.dataProvider = o;
// This may get called before dataProvider is set, so make sure not null and has entries
if (o!=null && o.length) {
// Got it, set flag
bDataProviderSet = true;
}
}
// set for selectedValue
public function set selectedValue(s:String):void {
// Set flag
bSelectedValueSet = true;
// Save value
_selectedValue = s;
// Invalidate to force commit
invalidateProperties();
}
]]>
</mx:Script>
</mx:ComboBox>
============================================================
This solution works until you set the combobox to be editable.
What I am trying to has three indexes in the combobox (-1, 0, and one that the user can type in a value). Using your solution I can make the combobox value aware, but as soon as I flag the combobox as editable it will no longer lets me submit a value.
Does anyone have a work around for that?