Lots of us have needed a Flex ComboBox populated with U.S. States, and there are examples of that out there. But what I needed for an app I am working on is something a little different, a ComboBox that could display U.S. States or Canadian Provinces (but not at the same time, obviously). One simple (albeit ugly) solution would be to have two controls, switching the active one as needed. But nah, a better solution would be a control that does both. And so, with lots of invaluable help from Peter Ent, I created a USCAStates control. Here is how it could be used:
And that country property can be change on the fly, forcing the list to refresh on demand based on whatever country name is passed. In my application I have another ComboBox containing countries. If United States is selected then the next ComboBox displays U.S. States, if Canada is selected then the next ComboBox displays Canadian Provinces, and if any other country is selected then the next ComboBox is disabled using enabled=false.
Here is the code for USCAStates:
[Update]
Here is a simple usage example, sent to me by Dan Zeitman:
Flex ComboBox To Display U.S. States And Canadian Provinces
5 responses to “Flex ComboBox To Display U.S. States And Canadian Provinces”
-
Nice code.
Minor point….the Canadian territory is called ‘Nunavut’, not ‘Nanavut’.
http://www.gov.nu.ca/Nunavut/ -
Craig, thanks, fixed it.
— Ben -
Muy Cooll,
Thanks Ben !!! -
how do you get the value out of the combobox? How do you get data and label?
-
more extensible approach – let the state component filter based on the country id passed.
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var _countryID:uint;
[Bindable]
public function set countryID(id:uint):void {
this._countryID = id;
(this.dataProvider as ArrayCollection).filterFunction = filterData;
(this.dataProvider as ArrayCollection).refresh();
this.selectedIndex = 0;
}
public function get countryID():uint {
return this._countryID;
}
private function filterData(val:Object):Boolean {
return (val.data == this._countryID);
}
]]>
</mx:Script>
</mx:ComboBox>
That’s how it’s used in the main app:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:miningComponents="com.satpara.components.*"
layout="absolute"
xmlns:satpara="http://www.satpara.com" xmlns:local="*">
<mx:ArrayCollection id="country">
<mx:Array>
<mx:Object label="United States" data="1"></mx:Object>
<mx:Object label="Canada" data="2"></mx:Object>
</mx:Array>
</mx:ArrayCollection>
<mx:ArrayCollection id="statesProvinces" >
<mx:Array>
<mx:Object label="Colorado" data="1"></mx:Object>
<mx:Object label="Kansas" data="1"></mx:Object>
<mx:Object label="Massachusetts" data="1"></mx:Object>
<mx:Object label="Oregon" data="1"></mx:Object>
<mx:Object label="Washington" data="1"></mx:Object>
<mx:Object label="Texas" data="1"></mx:Object>
<mx:Object label="Florida" data="1"></mx:Object>
<mx:Object label="New Hampshire" data="1"></mx:Object>
<mx:Object label="British Columbia" data="2"></mx:Object>
<mx:Object label="Alberta" data="2"></mx:Object>
<mx:Object label="Manitoba" data="2"></mx:Object>
<mx:Object label="Sasketchewan" data="2"></mx:Object>
<mx:Object label="Ontario" data="2"></mx:Object>
<mx:Object label="Quebec" data="2"></mx:Object>
<mx:Object label="North West Territories" data="2"></mx:Object>
<mx:Object label="Nunavut" data="2"></mx:Object>
</mx:Array>
</mx:ArrayCollection>
<mx:ComboBox id="countriesCB" dataProvider="{country}" x="168" y="60"></mx:ComboBox>
<local:StatesComboBox dataProvider="{statesProvinces}" countryID="{countriesCB.selectedItem.data as uint}"></local:StatesComboBox>
<mx:Script>
<![CDATA[
private function filterStates(val:Object):Boolean {
return val.id = countriesCB.selectedItem.data
}
]]>
</mx:Script>
</mx:Application>
Leave a Reply