Question

I’m trying to create a nested list in Flex which will dynamically resize to display all children when the data provider changes.

Here’s a simplified example which illustrates the problem:

<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]
        public var outer:ArrayCollection = new ArrayCollection(["one", "two", "three"]);

        [Bindable]
        public var inner:ArrayCollection = new ArrayCollection([]);

        public function addInnerListItems () : void {
            inner.addItem("fish");
            inner.addItem("mice");
            inner.addItem("cats");
            inner.addItem("bats");
        }
    ]]>
</mx:Script>

<mx:Button label="Add inner list items" click="addInnerListItems()" />

<mx:List dataProvider="{outer}" rowCount="{outer.length}">
    <mx:itemRenderer>
        <mx:Component>
            <mx:VBox>
                <mx:Label text="{this.data}" />
                <mx:List dataProvider="{outerDocument.inner}" rowCount="{outerDocument.inner.length}">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:Label text="{this.data}" />
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:List>
            </mx:VBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:List>

The list sizes remain static when items are added.

If I add variableRowHeight="true" to the outer list then the inner lists will correctly resize. But the outer list itself remains at a fixed size.

How can I have both lists resize automatically to display all children?

Thanks!
Stu

Answer 1

Override the list class and in your new class override the measure method to calculate measuredWidth and measuredHEight to calculate the values as if all list items were renderered on the screen at full size.

Then override updateDisplayList() in the component that contains the embedded list to size the upper list to the measuredWidth and measurdHeight.

I would not take this approach lightly, though. IF you do this you will be rendering all items on the screen, which negates the renderer recycling benefits of using the List class in the first place.