ActionScript 3 accordion component child container overlay each other

Question

Hi all,

I use accordion list in as3 to display marker cluster info on google map. For some reason, the current selected child container(a vbox) is overlaid partly by the next container's label. And it seems the longer the accordion list, the bigger the area of the container will be covered. I tried to set the resizeToContent property to true/false but neither seem to work. Here is the custom accordion class("list" is an array of marker infowindow objects which also extends UIComponent):

package{
         import mx.containers.Accordion;
          ...
public class AccordionWindow extends UIComponent{ 

public function AccordionWindow(list:Array){

        var panel:Box = new Box();
  panel.width = 300;
  panel.height = 200;
  addChild(panel);

  var acc:Accordion = new Accordion();
  acc.percentWidth = 100;
  acc.percentHeight = 100;

  for (var i:int = 0; i < list.length; i++)
  {
   var vbox:VBox = new VBox();
   vbox.label = "Item" + String(i);
   vbox.addChild(list[i]);
   acc.addChild(vbox);
  }

  panel.addChild(acc);

} }

Any ideas?

Answer 1

I'm not sure what exactly the cause of your problem is, but here are a couple of thoughts that should help.

1. You need to start your constructor with a super() statement.

   public function AccordionWindow(list:Array)
   {
       super();
   
   
       // any other code you might have in your constructor.  
       // generally, you'll want to store arguments in instance properties.  
       // maybe something like this:
   
   
      this.list = list;
   
   
   
   
   }
   

Sorry - don't know why I'm having so much trouble with the code formatting...

1. Based on the code you posted, it looks like the AccordionWindow class is intended to create an Accordion and put it in a Box. Maybe you have a specific need to do things the way you are trying to do them, but in my experience it would make better sense to extend Box, rather than UIComponent.

2. You'll tend to run into issues creating children and adding them to the stage in the constructor. Instead, override the protected createChildren method and move all of the code you currently have in your constructor to that method.

createChildren is called automatically, so you don't have to do anything more than override it and move your code into it.

override protected function createChildren():void
{
    super.createChildren();  // very important.  do not leave this out.

    // paste the code that is currently in the constructor here
}

There is a very helpful post about the UIComponent lifecycle at http://danorlando.com/?p=122.