Flex/ActionScript: RangeError #2006 for Adding of Same Child Multiple Times to Parent

The error "RangeError: Error #2006: The supplied index is out of bounds." is a commonly seen error when using arrays and other collection types. This blog entry details a situation in which this error arises from incorrect usage of a FormItem with Form. In short, the same FormItem cannot be added multiple times to Form via its .addChild method.

Here is sample code (SpecifiedIndexError.mxml):

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                width="750" height="500"
  applicationComplete="runDoNotTryThisAtHome();">

  <mx:Script>
  <![CDATA[
  /**
   * To compile solely this Flex application from the command line, use
   *    mxmlc -debug=true -strict=true SpecifiedIndexError.mxml
   *
   * This application demonstrates one situation in which a relatively common
   * RangeError can occur.
   */

   import mx.containers.Form;
   import mx.containers.FormItem;

  /**
   *
   */
  public function runDoNotTryThisAtHome():void
  {
    var form:Form = new Form();
    
    // WARNING: The following line should be inside of the for loop and not
    //          outside of the loop as shown here.  This code will compile,
    //          but will result in an error:
    //
    //          RangeError: Error #2006: The supplied index is out of bounds.
    //
    //          Move the instantiation of each FormItem down inside the loop
    //          makes the error go away and the application works properly.
    var formItem:FormItem = new FormItem();
    for ( const index:int = 0 ; index < 5; index++ )
    {
      formItem.label = "Label-" + index;
      form.addChild(formItem);
    }
    mainBox.addChild(form);
  }
  ]]>
  </mx:Script>

  <mx:HBox id="mainBox">
   <mx:Label text="Watch for constructed form!" />
  </mx:HBox>

</mx:Application>

In the code in the example above has the two most interesting lines highlighted. The first line is the instantiation of the FormItem before the loop. This is a mistake because the FormItem should be instantiated inside the loop so that there is a different instance of FormItem each time through the loop. This code will compile as-is, but will have the RangeError at runtime when the same FormItem is attempted to be added to the Form multiple times. The second highlighted line shows the line of offending code as reported by the exception message shown below.

RangeError: Error #2006: The supplied index is out of bounds.
 at flash.display::DisplayObjectContainer/addChildAt()
 at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::$addChildAt()[C:\dev\flex_201_gmc\sdk\frameworks\mx\core\UIComponent.as:4676]
 at mx.core::Container/addChildAt()[C:\dev\flex_201_gmc\sdk\frameworks\mx\core\Container.as:2278]
 at mx.containers::Form/addChildAt()[C:\dev\flex_201_gmc\sdk\frameworks\mx\containers\Form.as:179]
 at mx.core::Container/addChild()[C:\dev\flex_201_gmc\sdk\frameworks\mx\core\Container.as:2214]
 at mx.containers::Form/addChild()[C:\dev\flex_201_gmc\sdk\frameworks\mx\containers\Form.as:168]
 at SpecifiedIndexError/runDoNotTryThisAtHome()[C:\flexExamples\FormItemOutsideLoop\SpecifiedIndexError.mxml:37]

Moving the line of code that instantiates FormItem down into the for loop resolves the problem and the application runs correctly.

The main point of this entry is to show that RangeError problems can occur even outside of the traditional array context. As another blog entry shows, this error can also occur when moving a component from one parent container to another parent container.