動態添加單選按鈕兩次 - 錯誤＃2025：提供的DisplayObject必須是調用者的子女

Question

我有一個FLEX 4應用程序，並且在動態添加UI控件時遇到了一些麻煩。主要用單選按鈕。

下面是一個說明我的問題的例子：

<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 
       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> 

^運行這一點。點擊「添加面板」按鈕。然後點擊「清除」。然後再次點擊「添加面板」按鈕。你會看到錯誤：

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]

我不明白爲什麼我不能重新添加單選按鈕，第一次去之後呢？只有當我將單選按鈕添加到窗體/面板時纔會發生這種情況。

如果您註釋掉單選按鈕的代碼（註釋部分＃3），則可以輕鬆地重新添加面板。試試吧，評論了這一點，你可以添加，沒有問題重新添加面板：

  //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); 

這究竟是爲什麼？如何解決？爲什麼這隻發生在單選按鈕上？我可以使用複選框，textinputs，不管它是什麼，它不會拋出像這樣的異常......任何想法？

Answer 1

您並未將您的單選按鈕添加到單選按鈕組。開始這樣做，你應該停止看到錯誤。

也就是說，這條線是一個謎對我說：

myList.addChild(thePanel); 

爲什麼要補充孩子列表控件？您不應該使用列表作爲容器。它應該只關注在DataProvider中顯示項目。列表類沒有定位或佈局不在dataProvider中的元素的功能。

此外，創建新的單選按鈕，當你沒有括號：

var myRadioButton:RadioButton = new RadioButton; 

在理論上不應該有所作爲，但它始終是我的偏好，以保持在括號

。

這裏是工作代碼：

<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; 
      import mx.controls.RadioButtonGroup; 

      import spark.components.RadioButtonGroup; 


      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 radioButtonGroup : mx.controls.RadioButtonGroup = new mx.controls.RadioButtonGroup(); 
       var myRadioButton:RadioButton = new RadioButton(); 
       myRadioButton.id = "myRadioButton" + theChar ; 
       myRadioButton.name = "myRadioButton" + theChar ; 
       myRadioButton.group = radioButtonGroup ; 
       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:VBox 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>