I'd like to have a double click event on a datagrid in Flex3. The following example only works if the Accordion (id = "mustBeSecond") container comes after the DataGrid. Why is the order of the components important and what can I do to prevent this behavior? (The example does not work. If you change the order of "mustBeSecond" and "gridReportConversions" the example works fine)

<mx:Script>
    <![CDATA[
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;

            [Bindable] private var dp:ArrayCollection = new ArrayCollection([
                {qty:1,referer:'http://google.com'},
                {qty:25,referer:'http://cnn.com'},
                {qty:4,referer:'http:stackoverflow.com'}]);

            private function refererRowDoubleClicked(e:Event):void { 
                Alert.show("double click");
            }

    ]]>
</mx:Script>


<mx:HBox width="100%" height="100%"> 
  <mx:Accordion width="200" height="200" id="mustBeSecond">
    <mx:Canvas label="Navigation Box" width="100%" height="100%">
        <mx:VBox>
            <mx:LinkButton label="First Link" />
            <mx:LinkButton label="Second Link" />
        </mx:VBox>
    </mx:Canvas>
  </mx:Accordion>                   
  <mx:DataGrid id="gridReportConversions" height="100%" width="100%" dataProvider="{this.dp}"
    mouseEnabled="true" doubleClickEnabled="true" itemDoubleClick="refererRowDoubleClicked(event)">
      <mx:columns>
        <mx:DataGridColumn width="75" dataField="qty" headerText="Qty" />
        <mx:DataGridColumn dataField="referer" headerText="URL" />
      </mx:columns>
  </mx:DataGrid>  
</mx:HBox>