VBox.addChild not refreshing

[ferrisb]

I'm trying to populate a VBox with a list of custom components that represent different comments on an image.

The basic setup is like so:


<commentWindow (extends VBox)>
<mx:LinkButton id="addButton" label="Add Your Comments" />

<mx:VBox id="commentList" width="100%" />

<mx:Form id="submitForm" width="100%">
<mx:FormHeading label="Your Comments" />
<mx:FormItem>
<mx:TextArea id="userComment" width="100%" height="150"/>
</mx:FormItem>
<mx:FormItem>
<mx:Button id="submitBtn" label="Add Your Comment" />
</mx:FormItem>
<mx:FormItem>
<mx:Button id="cancelBtn" label="Cancel" />
</mx:FormItem>
</mx:Form>
</commentWindow>


Once the list of comments is received from the server, my event handler is placing my comment components in the VBox I want them in:


private function refreshCommentList ():void {
var totalComments:uint = _commentManager.noteList.length;
for (var i:uint = 0; i < totalComments; i++) {
var comment:CommentData = _commentManager.noteList[i];
var newItem:CommentItem = new CommentItem();
newItem.commentData = comment;

commentList.addChild(newItem);
}
}

The problem I'm having is that the VBox (commentList) isn't refreshing, and stacking the the items vertically. It's just placing them all one on top of the other. I've tried calling invalidateDisplayList() on just about everything, but that doesn't seem to matter.

Anyone have any ideas what I'm doing wrong?

[ferrisb]

Found the problem - here's how I understand it:

I had forgetten to implement UIComponent.measure(), so as far as the VBox was concerned, each item was only 0 pixels high, so it was placing them on top of each other. Once I implemented measure(), everything lined up just like I wanted it to.