Error #2006: The supplied index is out of bounds,in flex

I have created a component for alert box and I am using it in main application,

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
    backgroundColor="#000000" backgroundAlpha="0.75"
    addedEffect="Fade" hideEffect="Fade"
    horizontalAlign="center" verticalAlign="middle"
    creationComplete="creationCompleteHandler()">
    
    <mx:Style>    
        .myButton {
            overSkin:Embed("folder/over.png");
            upSkin:Embed(source="folder/up.png");
            downSkin:Embed(source="folder/down.png");
        }
    </mx:Style>
    
    <mx:Script>
        <![CDATA[
            import mx.core.Application;
            import mx.managers.PopUpManager;
            import mx.controls.Button;
            
            [Bindable] public var resultHandler:Function;
            
            public function creationCompleteHandler():void {
                initializeButtons();
                this.setFocus();
                Application.application.isAlertShowing = true;
            }
            
            public function initializeButtons():void {
                buttonsContainer.removeAllChildren();
                
                for( var i:int = 0; i < buttonsCount; i++ ) {
                    var button:Button = new Button;
                    button.label = buttonsLabels[i];
                    button.addEventListener(MouseEvent.CLICK, buttonClickHandler);
                    button.styleName = "myButton";
                    
                    buttonsContainer.addChild(button);
                    
                }
                
                Button( buttonsContainer.getChildAt(0) ).setFocus();
            }
            
            private function buttonClickHandler(event:MouseEvent):void {
                selectedButton = Button(event.currentTarget).label;
                
                try {
                    resultHandler.call();
                    this.parent.removeChild(this);
                    Application.application.isAlertShowing = false;
                }
                finally {
                    ;
                }
            }
            
            public function enableLargeMode():void {
                canvas.setStyle("backgroundImage", null);
                canvas.setStyle("backgroundColor", 0xffffff);
                canvas.setStyle("borderColor", 0x3b73b9);
                canvas.setStyle("borderStyle", "solid");
                canvas.setStyle("borderThickness", 4);
                
                titleLabel.setStyle("color", 0x3b73b9);
            }
            
        ]]>
    </mx:Script>
    
    <mx:Number id="buttonsCount">2</mx:Number>
    
    <mx:Array id="buttonsLabels">
        <mx:String>OK</mx:String>
        <mx:String>Yes</mx:String>
        <mx:String>No</mx:String>
    </mx:Array>
    
    <mx:String id="selectedButton"/>
    
    <mx:String id="title"/>
    <mx:String id="text"/>
    
    <mx:Canvas id="canvas" 
        width="268" height="135" backgroundImage="@Embed('AdvancedAlertAssets/alert-box.png')">
        
        <mx:Label id="titleLabel" x="18" y="6"
             color="#ffffff" fontWeight="bold" fontSize="16" fontFamily="GE Inspira" 
             text="{title}"/>
        
        <mx:Text id="textText" left="18" top="36" right="18" height="100%"
            fontFamily="GE Inspira" fontSize="12"
            htmlText="{text}"/>
        
        <mx:HBox id="buttonsContainer" 
            bottom="18" left="0" right="0" horizontalAlign="center">
            
        </mx:HBox>
        
    </mx:Canvas>
    
</mx:VBox>

N开发者_开发问答ow I am using in application like this

var advancedAlert:AdvancedAlert = new AdvancedAlert;
            this.addChild(advancedAlert);
            advancedAlert.title = "Title";
            advancedAlert.text = "text";
            advancedAlert.buttonsCount = 2;
            advancedAlert.resultHandler = myAlertHideHandler;
            advancedAlert.initializeButtons();
            advancedAlert.buttonsLabels[0] = "Yes";
            advancedAlert.buttonsLabels[1] = "No";
            
            function myAlertHideHandler( ):void {
                if( advancedAlert.selectedButton == 'Yes' ) {
                     var myAlerta:AdvancedAlert = new AdvancedAlert();
          **this.addChild(myAlerta);**
          myAlerta.title = "Information";
          myAlerta.text = "Unable to connect to the server";            
          myAlerta.buttonsCount = 1;
          myAlerta.resultHandler = alertListnerFirst;           
          myAlerta.initializeButtons();
                }
            }

It is showing error like

RangeError: Error #2006: The supplied index is out of bounds.
    at flash.display::DisplayObjectContainer/addChildAt()
    at mx.core::Container/addChildAt()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2206]
    at mx.core::Container/addChild()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2140]
    at main/checkInternetConnection()

I am unable to understood the error how can I resolve it?

You have to call removeChild() on the current parent before calling `addChild() to attach it to the new parent.

function myAlertHideHandler( ):void {
    button.removeChild();                
    if( advancedAlert.selectedButton == 'Yes' ) {
         var myAlerta:AdvancedAlert = new AdvancedAlert();
         **this.addChild(myAlerta);**
         myAlerta.title = "Information";
         myAlerta.text = "Unable to connect to the server";            
         myAlerta.buttonsCount = 1;
         myAlerta.resultHandler = alertListnerFirst;           
         myAlerta.initializeButtons();
    }
}