Problem with scrolling a sparks list with TileLayout in Flex 4.5

I'm experiencing a very strange behavior with a spark list with TileLayout placed inside a scroller. Basically, I want to have a title area above my list that scrolls away when the user scrolls down the list. To do this I put the title and the list inside a Group and wrapped the group inside a scroller with width and height = 100%. I also set the verticalScrollPolicy to off on the list to make sure everything scrolls together.

The problem is that if the list has the default VerticalLayout everything works fine but if you assign a TileLayout to the same list it only partially renders the items (about 30 items when testing on iPhone 4).

Here's the fully functioning code. Try it like this first, then try removing the <s:layout> part to confirm that it works well with VerticalLayout:

<?xml version="1.0" encoding="utf-8"?>
<s:View 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    >

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

            [Bindable]
            public var myAC:Arr开发者_StackOverflow中文版ayCollection = new ArrayCollection([
                "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72","73","74","75","76","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100"
            ]);
        ]]>    
    </fx:Script>

    <s:Scroller width="100%" height="100%">
        <s:VGroup>

            <s:Label text="TITLE" width="100%" height="200" backgroundColor="#333333" color="#EEEEEE"/>

            <s:List
                id="list"
                width="100%"
                verticalScrollPolicy="off"
                dataProvider="{myAC}" >

                <s:layout>
                    <s:TileLayout 
                        columnWidth="200"
                        rowHeight="200"
                        useVirtualLayout="true" />
                </s:layout>

            </s:List>

        </s:VGroup>
    </s:Scroller>     

</s:View>

What am I doing wrong? Or is this a bug?

---

You need to calculate and set the height of the list. You can easily calculate it by figuring out the number of rows times the height of a row as below:

private function listHeight():Number {
    // In this example you had 3 items to a row on the iPhone4 emulator
    var numRows:Number = Math.ceil(myAC.length / 3);

    // The height of the row (200) plus the gap between rows (6)
    var rowHeight:Number = 200 + 6;
    return numRows * rowHeight;
}

This is not a perfect solution, especially if you are targeting multiple screen densities (as the number of items per row will differ from device to device), but it might get you on the right track.

A better solution would be to extend the list component in an ActionScript class and add a header which you can set.