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>