<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/24/using-a-bitmap-image-skin-in-a-spark-button-control-in-flex-4/ -->
<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" creationComplete="onCreationComplete(event)" height="250" width="250" accessibilityEnabled="false"
			   xmlns:effects="com.topdata.effects.*">
	<fx:Script>
		<![CDATA[
		import mx.effects.easing.*;
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<effects:MySound id="mySoundEffect" target="{submit}" />
	</fx:Declarations>
	
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		
		#submit {
			skinClass: ClassReference("ButtonSubmitSkin");
		}	
		#clear {
			skinClass: ClassReference("ButtonClearSkin");
		}
		s|ComboBox {
			skinClass: ClassReference("ComboboxSkin");
			
		}	
	
	</fx:Style>	
	<fx:Script>
		<![CDATA[
			
			// Loading
			import com.greensock.events.LoaderEvent;
			import com.greensock.loading.*;
			import com.greensock.loading.display.FlexContentDisplay;
			import com.rational.serialization.json.*;
			import flash.net.*;
			import flash.utils.ByteArray;
			
			//  Display & Events
			import flash.display.Sprite;
			import flash.events.Event;
			import mx.effects.easing.*;
			import mx.events.FlexEvent;
			import spark.events.IndexChangeEvent;
			
			import mx.collections.SortField;
			import mx.collections.Sort;
			
			
			// Data Handling 
			import mx.collections.ArrayCollection;
			import mx.collections.*;
			import mx.controls.*;
			import mx.core.FlexGlobals;	
			import mx.utils.*;
			
			private var bannerContainer:FlexContentDisplay;			

			private var queueManu:LoaderMax;
			private var queueModels:LoaderMax;
			private var queueSeriesUpdate:LoaderMax;
			
			private var manuId:int;
			private var seriesId:int;
			
			private var _manufacturerStartInput:String ="Gerätehersteller wählen ...";
			private var _seriesStartInput:String ="Geräteserie wählen ...";
			private var _modelsStartInput:String ="Gerätemodell wählen ...";
			
			public var resultsListDeviceManufacturer:ArrayCollection;
			public var resultsListDeviceSeries:ArrayCollection;
			public var resultsListDevices:ArrayCollection
			
			/* Declare bindable properties in Application scope. */
			[Bindable]
			public var cid:String;
			
			[Bindable]
			public var lang:String;
			
			[Bindable]
			public var submitURL:String;
			
			private var _deviceManufacturerURL:String;
			private var _deviceSeriesURL:String;
			private var _deviceURL:String;
			public var deviceSelected:String;
			
			// Needed Paramter Quotes for the URLs
			public var deviceManufacturerId:String = "&Lookup=DeviceManufacturerId";
			public var deviceSeriesId:String="&Lookup=DeviceSeriesId";
			public var deviceId:String="&Lookup=DeviceId";
			private var manuParam:String = "&DeviceManufacturerId="
			private var seriesParam:String = "&DeviceSeriesId="	
			public var cidParam:String ="cid=";
			public var langParam:String ="&lang="; 
			public var startParams:String;	
			
			// Languages
			
			private function onCreationComplete(e:Event):void {		
				
				// Initializing FlashVars
				
				cid = FlexGlobals.topLevelApplication.parameters.cid;
				lang = FlexGlobals.topLevelApplication.parameters.lang;
				submitURL = FlexGlobals.topLevelApplication.parameters.submit;
				
				// Start Parameter for DeviceManufacturer URL 
				
				startParams = cidParam + cid + langParam + lang;
				
				// URLS to load 				
				_deviceManufacturerURL = "http://dev.ws.topdata.de/data/tdifdata.php?"+startParams+deviceManufacturerId;
				_deviceSeriesURL = "http://dev.ws.topdata.de/data/tdifdata.php?"+startParams+deviceSeriesId;
				_deviceURL = "http://dev.ws.topdata.de/data/tdifdata.php?"+startParams+deviceId;		
				
				// Tells LoaderMax that it will be working in Flex.				
				LoaderMax.contentDisplayClass = FlexContentDisplay;
				
				// This statement allows LoaderMax to parse SWF URLs if you were to 
				// attempt to use a generic loader component.  Handy if you plan
				// on loading multiple types of objects dynamically through XML.				
				LoaderMax.activate([DataLoader]);                                                                                   
				
				queueManu = new LoaderMax({name:"mainQueue",onProgress:progressHandlerManu,onComplete:completeHandlerManu,onError:errorHandlerManu});
				
				// Append the DataLoader and several other loaders				
				queueManu.append( new DataLoader(_deviceManufacturerURL, {name:"_dataManu" }) );
				
				// Fire Loading 				
				queueManu.load();
			}
			
			// Progress Handler for Manufacturer			
			private function progressHandlerManu(event:LoaderEvent):void
			{
				trace("progress: " + event.target.progress);
			}
			
			// Complete Handler for Manufacturer			
			private function completeHandlerManu(event:LoaderEvent):void
			{
				
				trace("Loading DeviceManufacturers Complete!");				
				
				// Creating Combobox DeviceManufacturer				
				var decodedDataManu:* = JSON.decode(LoaderMax.getContent("_dataManu"));            
				resultsListDeviceManufacturer = new ArrayCollection();
				var resultManu:Object;
				
				for each (resultManu in decodedDataManu)
				{
					resultsListDeviceManufacturer.addItem(resultManu);
					
				}  
				
				// Setting Input for DeviceManufacturer Combobox				
				comboManu.dataProvider = resultsListDeviceManufacturer;        
				comboManu.textInput.text = _manufacturerStartInput;		
				
			}
			
			private function clearDevices():void {
				comboModels.enabled = false;
				comboModels.textInput.text = _modelsStartInput;
			}						
			
			// Error Handler for DeviceManufacturer			
			private function errorHandlerManu(event:LoaderEvent):void
			{
				trace("error occured with " + event.target + ": " + event.text);
			}
			
			// onChange Event Handler for DeviceManufacturer Combobox			
			protected function comboManu_changeHandler(event:IndexChangeEvent):void
			{
				manuId = event.currentTarget.selectedItem.value;
				trace("DeviceManufacturer changed to: "+ manuId);
				comboSeries.enabled = true;	
				comboSeries.textInput.text = _seriesStartInput;
				clearDevices();
				
				queueSeriesUpdate = new LoaderMax({name:"mainQueue",onProgress:progressHandlerSeries,onComplete:completeHandlerSeries,onError:errorHandlerSeries});
				queueSeriesUpdate.append( new DataLoader(_deviceSeriesURL + manuParam + manuId, {name:"_dataSeriesUpdate"}) );
				queueSeriesUpdate.load();
			}
			
			// Progress Handler for DeviceSeries			
			private function progressHandlerSeries(event:LoaderEvent):void
			{
				trace("progress: " + event.target.progress);
			}
			
			private function completeHandlerSeries(event:LoaderEvent):void
			{
				// Creating Combobox Models
				var decodedDataSeries:* = JSON.decode(LoaderMax.getContent("_dataSeriesUpdate"));
				var resultsListSeries:ArrayCollection = new ArrayCollection();
				var resultSeries:Object;
				
				for each (resultSeries in decodedDataSeries)
				{
					resultsListSeries.addItem(resultSeries);
				}
				comboSeries.dataProvider = resultsListSeries;
			} 
		
			// Error Handler for DeviceSeries			
			private function errorHandlerSeries(event:LoaderEvent):void
			{
				trace("error occured with " + event.target + ": " + event.text);
			}	
			
			// onClick Handler for DeviceSeries			
			protected function clear_clickHandler(event:MouseEvent):void
			{
				comboSeries.textInput.text = _seriesStartInput;
				comboManu.textInput.text = _manufacturerStartInput;
				comboModels.textInput.text = _modelsStartInput;
			}
			
			// onChange Handler for DeviceSeries			
			protected function comboSeries_changeHandler(event:IndexChangeEvent):void
			{
				// TODO Auto-generated method stub				
				comboModels.enabled = true;
				seriesId = event.currentTarget.selectedItem.value;
				
				trace("DeviceSeries changed to: "+seriesId);
				
				queueModels = new LoaderMax({name:"mainQueue",onProgress:progressHandlerModels,onComplete:completeHandlerModels,onError:errorHandlerModels});
				queueModels.append( new DataLoader(_deviceURL + manuParam + manuId + seriesParam + seriesId, {name:"_dataModels"}) );
				queueModels.load();
				
			}
			// Progress Handler for Devices			
			private function progressHandlerModels(event:LoaderEvent):void
			{
				trace("progress: " + event.target.progress);
			}
			
			// Progress Handler for Devices			
			private function completeHandlerModels(event:LoaderEvent):void
			{
				
				// Creating Combobox for Devices				
				var decodedDataModels:* = JSON.decode(LoaderMax.getContent("_dataModels"));            
				resultsListDevices = new ArrayCollection();
				var resultModels:Object;
				
				for each (resultModels in decodedDataModels)
				{
					resultsListDevices.addItem(resultModels);
				}    
				
				// Setting Input for Devices Combobox				
				comboModels.dataProvider = resultsListDevices;
				comboModels.textInput.text = _modelsStartInput;
				
				/* Create the SortField object for the "data" field in the ArrayCollection object, and make sure we do a numeric sort. */
				var dataSortField:SortField = new SortField();
				dataSortField.name = "key";
				dataSortField.numeric;
				
				/* Create the Sort object and add the SortField object created earlier to the array of fields to sort on. */
				var numericDataSort:Sort = new Sort();
				numericDataSort.fields = [dataSortField];
				
				/* Set the ArrayCollection object's sort property to our custom sort, and refresh the ArrayCollection. */			
				resultsListDevices.sort = numericDataSort;
				resultsListDevices.refresh();
			} 
			
			// onChange Handler for Devices			
			protected function comboModels_changeHandler(event:IndexChangeEvent):void
			{
				deviceSelected = event.currentTarget.selectedItem.value;
				submit.enabled = true;
			}
			
			// Error Handler for Devices			
			private function errorHandlerModels(event:LoaderEvent):void
			{
				trace("error occured with " + event.target + ": " + event.text);
			}
			
			// onClick Handler for Devices (if selected)			
			protected function submit_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub				
				trace("Redirecting to Shop for DeviceId: "+deviceSelected);
				getURL(submitURL + deviceSelected);
			}
			
			// Getter Function for Submit URL 			
			public static function getURL(url:String, window:String = null):void
			{
				var req:URLRequest = new URLRequest(url);
				trace("getURL", url);
				try
				{
					navigateToURL(req, window);
				}
				catch (e:Error)
				{
					trace("Navigate to the Shop failed", e.message);
				}					
			}
    ]]>
	</fx:Script>
	<fx:Declarations>
	</fx:Declarations>	
	<s:Group id="swfDisplayArea"  
			 useHandCursor="false" 
			 buttonMode="true"  
			 mouseChildren="true" 
			 width="250"
			 height="250"
			 y="0"
			 x="0">
		
		<s:BorderContainer width="250" height="250">
			<s:Rect width="100%" height="100%">
				<s:fill>
					<s:BitmapFill source="@Embed('assets/img/background.jpg')" alpha="1"/>
				</s:fill>
			</s:Rect>
			<s:Label x="10" y="14" text="Ihren Gerätehersteller wählen ...&#xd;" fontFamily="Helvetica" fontSize="14" fontStyle="normal" color="#F4F4F4" fontLookup="auto" kerning="auto" backgroundColor="#232323" backgroundAlpha="0.3" paddingBottom="5" paddingTop="5" paddingLeft="5" paddingRight="5"/>
			<s:Label x="10" y="71" text="Geräte Serie wählen ..." fontFamily="Helvetica" fontSize="14" fontStyle="normal" color="#F4F4F4" fontLookup="auto" kerning="auto" backgroundColor="#232323" backgroundAlpha="0.3" paddingBottom="5" paddingTop="5" paddingLeft="5" paddingRight="5"/>
			<s:Label x="10" y="129" text="Geräte Modell wählen ..." fontFamily="Helvetica" fontSize="14" fontStyle="normal" color="#F4F4F4" fontLookup="auto" kerning="auto" backgroundColor="#232323" backgroundAlpha="0.3" paddingBottom="5" paddingTop="5" paddingLeft="5" paddingRight="5"/>
		</s:BorderContainer>		
		
		<s:ComboBox x="11" height="25" width="230" y="42" fontFamily="Arial" fontSize="13" fontStyle="normal" textAlign="left" id="comboManu" toolTip="Bitte Hersteller wählen!" focusEnabled="false" hasFocusableChildren="false" labelField="key" change="comboManu_changeHandler(event)" cornerRadius="0" paddingLeft="2" paddingRight="2" paddingTop="2" paddingBottom="2" color="#606060"/>
		<s:ComboBox x="11" height="25" width="230" y="100" fontFamily="Arial" fontSize="13" fontStyle="normal" textAlign="left" id="comboSeries" toolTip="Ihre Geräteserie auswählen" focusEnabled="false" hasFocusableChildren="false" labelField="key" enabled="false" change="comboSeries_changeHandler(event)" cornerRadius="0" paddingBottom="2" paddingLeft="2" paddingRight="2" paddingTop="2" color="#606060"/>
		<s:ComboBox x="11" height="25" width="230" y="156" fontFamily="Arial" fontSize="13" fontStyle="normal" textAlign="left" id="comboModels" toolTip="Zugehöriges Modell wählen" focusEnabled="false" hasFocusableChildren="false" labelField="key" enabled="false" cornerRadius="0" change="comboModels_changeHandler(event)" paddingBottom="2" paddingLeft="2" paddingRight="2" paddingTop="2" color="#606060"/>
		<s:Button x="143" y="190" id="submit" enabled="false" rollOver="mySoundEffect.end();mySoundEffect.play();" click="submit_clickHandler(event)"/>
		<s:Button x="47" y="190" id="clear" rollOver="mySoundEffect.end();mySoundEffect.play();"/>
	</s:Group>
</s:Application>

<?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" 
			   creationComplete="onCreationComplete(event)" height="250" width="250" accessibilityEnabled="false">
	<fx:Script>
		<![CDATA[
			import com.greensock.*;
			import com.greensock.events.LoaderEvent;
			import com.greensock.loading.*;
			import com.greensock.loading.display.FlexContentDisplay;
			import com.rational.serialization.json.*;
			
			import flash.display.Sprite;
			import flash.events.Event;
			import flash.net.URLVariables;
			import flash.utils.ByteArray;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.controls.TextInput;
			import mx.core.FlexGlobals;
			import mx.events.FlexEvent;
			
			import spark.events.IndexChangeEvent;
			
			private var swfContainer:FlexContentDisplay;
			
			private var queueManu:LoaderMax;
			private var queueModels:LoaderMax;
			private var queueSeriesUpdate:LoaderMax;
			
			private var manuId:int;
			private var seriesId:int;
			private var paramString:String = "=";
			private var paramQuote:String = "&";
			
			private var _manufacturerStartInput:String ="Gerätehersteller wählen ...";
			private var _seriesStartInput:String ="Geräteserie wählen ...";
			private var _modelsStartInput:String ="Gerätemodell wählen ...";
			
			/* Declare bindable properties in Application scope. */
			[Bindable]
			// Flash Var for "cid" (client id)
			public var cid:int;
			[Bindable]
			// FlashVar for "lang" (language)
			public var lang:String;
			
			private var _deviceManufacturerURL:String = "http://dev.ws.topdata.de/data/tdifdata.php?Lookup=DeviceManufacturerId";
			private var _deviceSeriesURL:String = "http://dev.ws.topdata.de/data/tdifdata.php?Lookup=DeviceSeriesId";
			private var _deviceURL:String = "http://dev.ws.topdata.de/data/tdifdata.php?Lookup=DeviceId";
			
			private var manuParam:String = "&DeviceManufacturerId="
			private var seriesParam:String = "&DeviceSeriesId="
			
			/* Assign values to new properties. */
			private function initVars():void {
				cid = FlexGlobals.topLevelApplication.parameters.cid;
				lang = FlexGlobals.topLevelApplication.parameters.lang;
			}
			
			private function onCreationComplete(e:Event):void {
				// Tells LoaderMax that it will be working in Flex.
				LoaderMax.contentDisplayClass = FlexContentDisplay;
				
				// This statement allows LoaderMax to parse SWF URLs if you were to 
				// attempt to use a generic loader component.  Handy if you plan
				// on loading multiple types of objects dynamically through XML.
				LoaderMax.activate([DataLoader]);                                                                                   
				
				queueManu = new LoaderMax({name:"mainQueue",onProgress:progressHandlerManu,onComplete:completeHandlerManu,onError:errorHandlerManu});
				
				// append the DataLoader and several other loaders
				queueManu.append( new DataLoader(_deviceManufacturerURL, {name:"_dataManu" }) );
				
				// start loading the shizzle
				queueManu.load();       
			}
			
			private function progressHandlerManu(event:LoaderEvent):void
			{
				trace("progress: " + event.target.progress);
			}
			
			private function completeHandlerManu(event:LoaderEvent):void
			{
				
				trace("Loading Complete!");				
				
			    // Creating Combobox Manufacturer
				var decodedDataManu:* = JSON.decode(LoaderMax.getContent("_dataManu"));            
				var resultsListManu:ArrayCollection = new ArrayCollection();
				var resultManu:Object;
				
				for each (resultManu in decodedDataManu)
				{
					resultsListManu.addItem(resultManu);
				}                     
				
				comboManu.dataProvider = resultsListManu;        
				comboManu.textInput.text = _manufacturerStartInput;
			}
			
			private function errorHandlerManu(event:LoaderEvent):void
			{
				trace("error occured with " + event.target + ": " + event.text);
			}
						
			// Change Event for Manufacturer Combobox
			protected function comboManu_changeHandler(event:IndexChangeEvent):void
			{
				trace("Gerätehersteller wurden gewechselt!");
				manuId = event.currentTarget.selectedItem.value;
				comboSeries.enabled = true;
	
				queueSeriesUpdate = new LoaderMax({name:"mainQueue",onProgress:progressHandlerSeries,onComplete:completeHandlerSeries,onError:errorHandlerSeries});
				queueSeriesUpdate.append( new DataLoader(_deviceSeriesURL + manuParam + manuId, {name:"_dataSeriesUpdate"}) );
				queueSeriesUpdate.load();
				trace(_deviceSeriesURL + manuParam + manuId);
			}
	
			private function progressHandlerSeries(event:LoaderEvent):void
			{
				trace("progress: " + event.target.progress);
			}
			
			private function completeHandlerSeries(event:LoaderEvent):void
			{				
				// Creating Combobox Models
				var decodedDataSeries:* = JSON.decode(LoaderMax.getContent("_dataSeriesUpdate"));            
				var resultsListSeries:ArrayCollection = new ArrayCollection();
				var resultSeries:Object;
				
				for each (resultSeries in decodedDataSeries)
				{
					resultsListSeries.addItem(resultSeries);
				}                     
				comboSeries.dataProvider = resultsListSeries;
			} 
			
			private function errorHandlerSeries(event:LoaderEvent):void
			{
				trace("error occured with " + event.target + ": " + event.text);
			}	

			protected function clear_clickHandler(event:MouseEvent):void
			{
				 comboSeries.textInput.text = _seriesStartInput;
				 comboManu.textInput.text = _manufacturerStartInput;
				 comboModels.textInput.text = _modelsStartInput;
			}
			
			protected function comboSeries_changeHandler(event:IndexChangeEvent):void
			{
				// TODO Auto-generated method stub
				comboModels.enabled = true;
				seriesId = event.currentTarget.selectedItem.value;
				queueModels = new LoaderMax({name:"mainQueue",onProgress:progressHandlerModels,onComplete:completeHandlerModels,onError:errorHandlerModels});
				queueModels.append( new DataLoader(_deviceURL + manuParam + manuId + seriesParam + seriesId, {name:"_dataModels"}) );
				queueModels.load();
				trace(_deviceURL + manuParam + manuId + seriesParam + seriesId);
			}
			
			private function progressHandlerModels(event:LoaderEvent):void
			{
				trace("progress: " + event.target.progress);
			}
			
			private function completeHandlerModels(event:LoaderEvent):void
			{
				
				// Creating Combobox Models
				var decodedDataModels:* = JSON.decode(LoaderMax.getContent("_dataModels"));            
				var resultsListModels:ArrayCollection = new ArrayCollection();
				var resultModels:Object;
				
				for each (resultModels in decodedDataModels)
				{
					resultsListModels.addItem(resultModels);
				}                     
				comboModels.dataProvider = resultsListModels;
				comboModels.textInput.text = _modelsStartInput;				
			} 
			
			private function errorHandlerModels(event:LoaderEvent):void
			{
				trace("error occured with " + event.target + ": " + event.text);
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>	
	<s:Group id="swfDisplayArea"  
			 useHandCursor="false" 
			 buttonMode="true"  
			 mouseChildren="true" 
			 width="250"
			 height="250"
			 y="0"
			 x="0">
		<s:ComboBox x="10" height="25" width="230" y="43" fontFamily="Arial" fontSize="13" fontStyle="normal" textAlign="left" id="comboManu" toolTip="Bitte Hersteller wählen!" focusEnabled="false" hasFocusableChildren="false" labelField="key" change="comboManu_changeHandler(event)"/>
		<s:Label x="11" y="21" text="Gerätehersteller wählen ...&#xd;" width="230" fontFamily="Arial" fontSize="14" fontStyle="normal" color="#DADADA" fontLookup="auto" kerning="auto"/>
		<s:ComboBox x="10" height="25" width="230" y="103" fontFamily="Arial" fontSize="13" fontStyle="normal" textAlign="left" id="comboSeries" toolTip="Ihre Geräteserie auswählen" focusEnabled="false" hasFocusableChildren="false" labelField="key" enabled="false" change="comboSeries_changeHandler(event)"/>
		<s:ComboBox x="10" height="25" width="230" y="163" fontFamily="Arial" fontSize="13" fontStyle="normal" textAlign="left" id="comboModels" toolTip="Zugehöriges Modell wählen" focusEnabled="false" hasFocusableChildren="false" labelField="key" enabled="false"/>
		<s:Label x="11" y="141" text="Geräte-Modell wählen ..." width="230" fontFamily="Arial" fontSize="14" fontStyle="normal" color="#DADADA" fontLookup="auto" kerning="auto"/>
		<s:Label x="11" y="81" text="Geräte-Serie wählen ..." width="230" fontFamily="Arial" fontSize="14" fontStyle="normal" color="#DADADA" fontLookup="auto" kerning="auto"/>
		<s:Button x="175" y="208" label="Submit" id="submit" focusEnabled="false"/>
		<s:Button x="104" y="208" label="Reset" id="clear" focusEnabled="false" click="clear_clickHandler(event)"/>
	</s:Group>
</s:Application>

Product Listing Combobox Flex (not sorting)

ActionScript 3