Adding Radio Button dynamically, twice - Error #2025: The supplied DisplayObject must be a child of

Question

Hello
I am having some trouble adding UI controls dynamically. Mostly with radio buttons.
Here is an example that demonstrates my problem:
<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"
    creationPolicy="all"
    >
    <fx:Script>
        <![CDATA[ 
            import mx.containers.Form;
            import mx.containers.Panel;
            import mx.controls.Label;
            import mx.controls.NumericStepper;
            import mx.controls.RadioButton;
            private var theChar:String = "B";
            protected function btnAdd_clickHandler(event:MouseEvent):void
                var theForm:Form = new Form();               
                theForm.label = theChar;
                //1. Label
                var myLabel:Label = new Label();
                myLabel.text = "My Label";
                myLabel.width=120;
                theForm.addChild(myLabel);
                //2. Numeric Stepper
                var myNumStepper:NumericStepper = new NumericStepper();
                myNumStepper.id = "numPointHigh" + theChar;
                myNumStepper.name = "numPointHigh" + theChar;
                myNumStepper.minimum = 0;
                myNumStepper.maximum = 120;
                myNumStepper.width = 50;
                myNumStepper.height = 30;
                theForm.addChild(myNumStepper);
                //3. radio button
                var myRadioButton:RadioButton = new RadioButton;
                myRadioButton.id = "myRadioButton" + theChar;
                myRadioButton.name = "myRadioButton" + theChar;
                myRadioButton.label = "my radio button";
                myRadioButton.selected = true;
                theForm.addChild(myRadioButton);
                //4. Panel
                var thePanel:Panel = new Panel();
                thePanel.width = 300;
                thePanel.height = 475;
                thePanel.name=theChar;
                thePanel.title = "My Profile Panel";
                thePanel.setStyle("backgroundColor", "blue");
                //add the form to the panel
                thePanel.addChild(theForm);
                //add the Panel to the list control
                myList.addChild(thePanel);
            protected function btnClear_clickHandler(event:MouseEvent):void
                var numChildren:Number = myList.numChildren;
                for(var i:Number=numChildren - 1; i > -1; i--){
                    myList.removeChildAt(i);
        ]]>
    </fx:Script>
    <mx:VBox width="100%">
        <mx:List id="myList" />
        <mx:Button id="btnAdd" label="Add a panel" click="btnAdd_clickHandler(event)" color="black"/>
        <mx:Button id="btnClear" label="Clear" click="btnClear_clickHandler(event)" color="black" />
    </mx:VBox>
</s:Application>
^ Run that. Click the "Add a panel" button. Then click "Clear". Then click the "Add a panel" button again. You will see the error:
ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
    at flash.display::DisplayObjectContainer/getChildIndex()
    at mx.core::Container/getChildIndex()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core \Container.as:2833]
    at mx.containers::Panel/getChildIndex()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co ntainers\Panel.as:1174]
    at mx.controls::RadioButtonGroup/breadthOrderCompare()[E:\dev\4.0.0\frameworks\projects\fram ework\src\mx\controls\RadioButtonGroup.as:600]
    at mx.controls::RadioButtonGroup/breadthOrderCompare()[E:\dev\4.0.0\frameworks\projects\fram ework\src\mx\controls\RadioButtonGroup.as:611]
    at mx.controls::RadioButtonGroup/breadthOrderCompare()[E:\dev\4.0.0\frameworks\projects\fram ework\src\mx\controls\RadioButtonGroup.as:611]
    at Array$/_sort()
    at Array/http://adobe.com/AS3/2006/builtin::sort()
    at mx.controls::RadioButtonGroup/http://www.adobe.com/2006/flex/mx/internal::addInstance()[E:\dev\4.0.0\frameworks\projects \framework\src\mx\controls\RadioButtonGroup.as:465]
    at mx.controls::RadioButton/addToGroup()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\c ontrols\RadioButton.as:574]
    at mx.controls::RadioButton/commitProperties()[E:\dev\4.0.0\frameworks\projects\framework\sr c\mx\controls\RadioButton.as:514]
    at mx.core::UIComponent/validateProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\ mx\core\UIComponent.as:7772]
    at mx.managers::LayoutManager/validateProperties()[E:\dev\4.0.0\frameworks\projects\framewor k\src\mx\managers\LayoutManager.as:572]
    at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.0.0\frameworks\projects\frame work\src\mx\managers\LayoutManager.as:730]
    at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.0.0\frameworks\projec ts\framework\src\mx\managers\LayoutManager.as:1072]
I do not understand why I cannot re-add the radio button? If you comment out the code for the radio button (comment section #3.) you can re-add the panels easily. It is only happening when I have radio buttons being added to the form/panel.
Why is this happening and how do I fix it? Why is this only happening to radio buttons? I thought I had this fixed

Answer 1

^ well, okay, but that's not the problem.
here, i removed list and replaced with Panel. same problem on the radio buttons.
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:containers="com.dougmccune.containers.*"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    creationPolicy="all"
    >
    <fx:Script>
        <![CDATA[ 
            import mx.containers.Form;
            import mx.containers.Panel;
            import mx.controls.Label;
            import mx.controls.NumericStepper;
            import mx.controls.RadioButton;
            private var theChar:String = "B";
            protected function btnAdd_clickHandler(event:MouseEvent):void
                var theForm:Form = new Form();               
                theForm.label = theChar;
                //1. Label
                var myLabel:Label = new Label();
                myLabel.text = "My Label";
                myLabel.width=120;
                theForm.addChild(myLabel);
                //2. Numeric Stepper
                var myNumStepper:NumericStepper = new NumericStepper();
                myNumStepper.id = "numPointHigh" + theChar;
                myNumStepper.name = "numPointHigh" + theChar;
                myNumStepper.minimum = 0;
                myNumStepper.maximum = 120;
                myNumStepper.width = 50;
                myNumStepper.height = 30;
                theForm.addChild(myNumStepper);
                //3. radio button
                var myRadioButton:RadioButton = new RadioButton;
                myRadioButton.id = "myRadioButton" + theChar;
                myRadioButton.name = "myRadioButton" + theChar;
                myRadioButton.label = "my radio button";
                myRadioButton.selected = true;
                theForm.addChild(myRadioButton);
                //4. Panel
                var thePanel:Panel = new Panel();
                thePanel.width = 300;
                thePanel.height = 475;
                thePanel.name=theChar;
                thePanel.title = "My Profile Panel";
                thePanel.setStyle("backgroundColor", "blue");
                //add the form to the panel
                thePanel.addChild(theForm);
                //add the Panel to the list control
                myContainer.addChild(thePanel);
            protected function btnClear_clickHandler(event:MouseEvent):void
                var numChildren:Number = myContainer.numChildren;
                for(var i:Number=numChildren - 1; i > -1; i--){
                    myContainer.removeChildAt(i);
        ]]>
    </fx:Script>
    <mx:VBox width="100%">
        <mx:Panel id="myContainer" />
        <mx:Button id="btnAdd" label="Add a panel" click="btnAdd_clickHandler(event)" color="black"/>
        <mx:Button id="btnClear" label="Clear" click="btnClear_clickHandler(event)" color="black" />
    </mx:VBox>
</s:Application>
Any idea why radio buttons causing this to happen? If I comment out the radio button, this works fine. This is really baffling me.
The exception is thrown when the dynamically created panel (thePanel) is added to the main Panel (myContainer):
myContainer.addChild(thePanel); <--- causes the exception!
^ Why would radio buttons make a difference on "thePanel"?? How can I enforce parent-child relationship, explicitly? .parent is read-only