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

Question

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

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

Now I am using in application like thisvar 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? Please help me in this, Thanks in advance.

Answer 1

Accept the answers if you feel they are answered. People here take their wee to riposte to your questions, why not give them the credit of just clicking the answer if it has helped you.

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();
            }
        }

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