Error 2050 with Menu and States - DisplayObject must be a child of the caller.

Question

Hi,
I'm starting an application using States and a main Menu and
when you click on the menu Item it changes the currentState.
I was doing fine until I wanted to dock the Menu using an
ApplicationControlBar.
You can see the error message:
http://dev2003.greatkingcasino.com/flex/casinomanagement.html
My Idea is have always the menu on top and use States for
each one of the menuItems. How can be done?
Thanks,
Paul
Code:
AS File:
// MENU PERMISSIONS
private function initApp():void
dsData.send();
}//initApp
private function onResultMenuData(oEvent:ResultEvent):void
xlcMenuData = new
XMLListCollection(oEvent.result.children());
private function menuHandler(oEvent:MenuEvent):void {
currentState = oEvent.item.@label;
MXML File:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="initApp()" currentState="navigation">
<mx:Script source="functions.as"/>
<mx:states>
<mx:State name="logIn">
blah
</mx:State>
<mx:State name="navigation">
<mx:SetProperty name="layout" value="absolute"/>
<mx:AddChild position="lastChild">
<mx:ApplicationControlBar dock="true">
<mx:MenuBar x="0" y="0"
dataProvider="{xlcMenuData}"
labelField="@label"
itemClick="menuHandler(event);">
</mx:MenuBar>
</mx:ApplicationControlBar>
</mx:AddChild>
</mx:State>
<mx:State name="Customer Detail" basedOn="navigation">
<mx:AddChild position="lastChild">
<mx:Panel x="0" y="111" width="464" height="247"
layout="absolute" title="General Information">
</mx:Panel>
</mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Panel x="472" y="111" width="350" height="530"
layout="absolute" title="Customer Information">
<mx:Form x="0" y="0" width="310" height="100%">
</mx:Form>
<mx:ControlBar>
<mx:Button label="Update Information"/>
</mx:ControlBar>
</mx:Panel>
</mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Panel x="0" y="366" width="300" height="247"
layout="absolute" title="Login Information">
</mx:Panel>
</mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Label text="User Name" x="347" y="59"/>
</mx:AddChild>
<mx:AddChild position="lastChild">
<mx:TextInput id="idCustomerID" text="1" x="421"
y="57"/>
</mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Button label="Search"
click="netService.GetCustomerDetails(idCustomerID.text);" x="589"
y="57"/>
</mx:AddChild>
</mx:State>
<mx:State name="Player Stats" basedOn="navigation">
<mx:AddChild position="lastChild">
<mx:Canvas label="Canvas 1" width="260"
backgroundColor="#e2e2e2" id="canvas6" height="580" y="61">
<mx:DateChooser x="10" y="66" id="datechooser1"/>
<mx:DateChooser x="10" y="290" id="datechooser2"/>
<mx:Button x="185" y="10" label="Search"
id="button1"/>
<mx:NumericStepper x="192" y="92" id="iniHour1" value="0"
minimum="0" maximum="23"/>
<mx:NumericStepper x="192" y="148" id="iniMinute1"
value="0" minimum="0" maximum="59"/>
<mx:Label x="10" y="40" text="Start Date"
fontWeight="bold" id="label1"/>
<mx:Label x="10" y="264" text="End Date"
fontWeight="bold" id="label2"/>
<mx:Label x="192" y="66" text="Hour" id="label3"/>
<mx:Label x="192" y="122" text="Minute" id="label4"/>
<mx:NumericStepper x="192" y="204" id="iniSecond1"
value="0" minimum="0" maximum="0"/>
<mx:Label x="192" y="178" text="Second" id="label5"/>
<mx:NumericStepper x="192" y="316" id="endHour1"
value="23" minimum="0" maximum="23"/>
<mx:NumericStepper x="192" y="372" id="endMinute1"
value="59" minimum="0" maximum="59"/>
<mx:Label x="192" y="290" text="Hour" id="label6"/>
<mx:Label x="192" y="346" text="Minute" id="label7"/>
<mx:NumericStepper x="192" y="428" id="endSecond1"
value="59" minimum="59" maximum="59"/>
<mx:Label x="192" y="402" text="Second" id="label8"/>
</mx:Canvas>
</mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Canvas label="Canvas 2" width="486"
backgroundColor="#e2e2e2" id="canvas7" height="1200" x="268"
y="61">
<mx:DataGrid x="10" y="10" width="402" height="100%"
id="datagrid1">
<mx:columns>
<mx:DataGridColumn headerText="Player"
dataField="col1"/>
<mx:DataGridColumn headerText="Risk"
dataField="col2"/>
<mx:DataGridColumn headerText="Win" dataField="col3"/>
<mx:DataGridColumn headerText="Casino win"
dataField="col1"/>
<mx:DataGridColumn headerText="Percent (%)"
dataField="col2"/>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
</mx:AddChild>
</mx:State>
<mx:State name="Casino Usage" basedOn="navigation">
</mx:State>
</mx:states>
<mx:HTTPService id="dsData" url="MenuData.xml"
resultFormat="e4x" result="onResultMenuData(event)"/>
</mx:Application>
Text

Answer 1

try{
catch(error:Error){
finally{
(look up error handling in documentation)