Flex: adding/removing component from HBox.rawChildren causes horizontalAlign to fail?

Question

I have an HBox displaying a series of canvases. I am removing a child of a canvas and adding it to the rawChildren of the containing HBox, so I can position it, and make it appear to shift outside the bounds of the canvas.

Here is the code from the canvas:

private function onMouseOver(e:MouseEvent):void
{
    (this.parent as HBox).rawChildren.addChild(dateLabel);
    dateLabel.x = (this.parent as HBox).localToGlobal(new Point(this.x,0)).x - 18;
}

private function onMouseOut(e:MouseEvent):void
{
    addChild(dateLabel);
    dateLabel.x = 0;
}

It works, but if the containing HBox.horizontalAlign is set to "right", when I add the child back to the Canvas, the HBox stops displaying correctly and puts all the child canvases overlapping on the right. There is no issue if the HBox is aligned "left" tho.

Is this a bug? Is there a work around?

Thanks!!

Answer 1

When you use rawChildren, you simply bypass the layout mechanism.

You should use addChild or addChildAt directly on the component.

Answer 2

Is this a bug? Is there a work around?
- John Isaacks

This isn't a bug as such, it's more that you are using a container in an unusual way.

When you use an HBox you are making a decision that all children are laid out in a linear, horizontal arrangement according to the rules of the HBox component.

Explicitly positioning a child is not what HBoxes are about - it's not in their job description.

I would recommend that you have an HBox inside a Canvas. You can add the dateLabel to the HBox when it should be laid out horizontally or move it to the Canvas when you need to set its position and make it look like it's outside the HBox.