Components inside a repeater not resizing as expected

Question

I have an mxml panel in which I'm using a repeater. The panel can be resized horizontally and I would like for the repeated components to resize together with panel. Here is a simplified example of how things look like:

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" ...>
    <!-- scripts and some controls -->
    <mx:VBox width="100%">
        <core:Repeater width="100%" dataProvider="model">
            <ns1:MyItemRenderer width="100%" />
        </core:Repeater>
    </mx:VBox>
</mx:TitleWindow>

When I resize the component, the width of the repeated items does not change.

There also buttons and event handlers, which add and remove items from the model. When this is done, the repeater updates to display the correct number of items and all the items are resized correctly.

I have not been able to get the items to resize when the root panel is resized. I can see, that the VBOx around the repeater is getting a resize event. However, the repeated items are not getting the event. I tried to dispatch a resize event to the repeated items manually from a resize handler I hooked up to the VBox but that didn't help.

I also tried adding and removing a dummy-item from the ArrayCollection which is the dataProvider (because that triggers a correct resize otherwise as mentioned above) However, doing this in the resize handler of the VBox just leads to the repeater not showing any items at all.

Is there any way to get items in a repeater to resize with their enclosing container?

The ItemRenderer I'm using resizes correctly when used in a mx:List. It is built so it can work both with the data property set by the List container an getRepeaterItem() when used in a Repeater. In this particular case, I cannot use the List as a container because of the way it behaves with regards to controlling its height via the rowCount, height and maxHeight properties which doesn't work out for me in this particular case (I spare you the details).

Answer 1

override updateDisplayList in the titleWindow and when the height or width changes, invalidate the displayList on every item created inside the repeater.

That said, using repeaters are generally considered bad practice because every component inside it is rendered. A list based class--which makes use of renderer recyling is considered to be much more performant.

Based on your code segment, I can't tell whether your code could be re-worked without repeaters, or not.

Answer 2

For the record, I figured out the following "solution":

Use the maxHeight attribute on the box enclosing the repeater, binding it to an expression that derives the correct value from the other components... I still need to hardcode any space I want to reserve for components that come after the box containing the repeater if I don't want to have them pushed out of the enclosing panel but it is good enough for now.

essentially:

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" ...>
    <!-- scripts and some controls -->
    <mx:VBox id="outerBox" height="100%">
        <mx:VBox id="innerBox" width="100%"
                 maxHeight="{outerBox.height - innerBox.y - 40}"> 
                 <!-- reserve 40 px for the button -->
            <core:Repeater width="100%" dataProvider="model">
                <ns1:MyItemRenderer width="100%" />
            </core:Repeater>
        </mx:VBox>
        <mx:Button label="Stay Visible"/>
    </mx:VBox>
</mx:TitleWindow>