<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:comp="components.*"
    layout="absolute" creationComplete="initApp();" backgroundColor="#f4f4f4" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.ResultEvent;
            
            import mx.rpc.http.HTTPService;
            
            private var comboService:HTTPService = new HTTPService();
            
            [Bindable]
            private var comboData:XML = new XML();
            
            private function initApp():void {
                comboService.url = "http://www.phusor.com/flex/optgroup/src/xml/comboboxoptions.xml";
                comboService.resultFormat = "e4x";
                comboService.send();
                comboService.addEventListener(ResultEvent.RESULT, handleServiceResult);
            }
            
            private function handleServiceResult(event:ResultEvent):void {
                comboData = event.result as XML;
            }
        ]]>
    </mx:Script>
    
    <mx:Form>
    
        <mx:FormItem label="I do not have a renderer">
            <comp:CustomCombo id="cb_VehiclesNoRenderer"
                dataProvider="{comboData.option}" 
                labelField="@label" valueField="@data" width="150"/>
        </mx:FormItem>
        
        <mx:FormItem label="I have a renderer">
            <comp:CustomCombo id="cb_VehiclesRenderer"
                itemRenderer="components.OptGroupRenderer"
                dataProvider="{comboData.option}"
                labelField="@label" valueField="@data" width="150"/>
        </mx:FormItem>
    
    </mx:Form>
    
</mx:Application>