title: Adding Radio Button dynamically, twice - Error #2025: The supplied DisplayObject must be a child of the caller
body: <p>I have a FLEX 4 application and I am having some trouble adding UI controls dynamically. Mostly with radio buttons.</p>
  
  <p>Here is an example that demonstrates my problem:</p>
  
  <pre><code>&lt;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"
      &gt;
  
      &lt;fx:Script&gt;
          &lt;![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 &gt; -1; i--){
                      myContainer.removeChildAt(i);
                  }
              }
  
          ]]&gt;
      &lt;/fx:Script&gt;
  
      &lt;mx:VBox width="100%"&gt;
          &lt;mx:Panel id="myContainer" /&gt;
          &lt;mx:Button id="btnAdd" label="Add a panel" click="btnAdd_clickHandler(event)" color="black"/&gt;
          &lt;mx:Button id="btnClear" label="Clear" click="btnClear_clickHandler(event)" color="black" /&gt;
      &lt;/mx:VBox&gt;
  
  &lt;/s:Application&gt;
  </code></pre>
  
  <p>^ Run that. Click the "Add a panel" button. Then click "Clear". Then click the "Add a panel" button again. You will see the error:</p>
  
  <blockquote>
    <p>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\containers\Panel.as:1174]
        at mx.controls::RadioButtonGroup/breadthOrderCompare()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\controls\RadioButtonGroup.as:600]
        at mx.controls::RadioButtonGroup/breadthOrderCompare()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\controls\RadioButtonGroup.as:611]
        at mx.controls::RadioButtonGroup/breadthOrderCompare()[E:\dev\4.0.0\frameworks\projects\framework\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\controls\RadioButton.as:574]
        at mx.controls::RadioButton/commitProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\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\framework\src\mx\managers\LayoutManager.as:572]
        at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:730]
        at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:1072]</p>
  </blockquote>
  
  <p>I do not understand why I cannot re-add the radio button, after the first go at it? It is only happening when I have radio buttons being added to the form/panel. </p>
  
  <p>If you comment out the code for the radio button (comment section #3.) you can re-add the panels easily. Try it, comment this out and you can add, re-add the panel with no problem:</p>
  
  <pre><code>            //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);
  </code></pre>
  
  <p>Why is this happening and how do I fix it? Why is this only happening to radio buttons? I can use checkboxes, textinputs, whatever and it doesn't throw exceptions like this...any ideas?</p>