[flexcoders] useVirtualLayout not working for simple Image based itemRenderer

[Sunil D]

Hi all,

I ran into an issue where my List control was creating an itemRenderer for each 
list item even though useVirtualLayout=true. Not sure if this is a known issue, 
or really even a bug. I found several ways to work around the problem.

The issue seems to be that if I use a simple itemRenderer that extends Image 
(or one that just includes an Image), the layout classes (VerticalLayout and 
TiledLayout, and probably others) are determining how many renderers to use 
based on the renderer's size. But since the Image hasn't been loaded yet, the 
sizes are zero and so it thinks it should create all of the renderers.

The strange thing is that if I just use the Image as a drop-in itemRenderer 
(i.e. set the itemRenderer property to "mx.controls.Image" this problem doesn't 
happen. Weird.

Below is some simple, contrived code to show the problem (use the profiler, or 
look at the trace statements).

I didn't find this to be a problem with the Halo List. I also tried several 
versions of the Gumbo SDK, with the same results. Sound like a bug or just 
something to be aware of?

Thanks,
Sunil

main app:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; 
                           xmlns:s="library://ns.adobe.com/flex/spark" 
                           xmlns:mx="library://ns.adobe.com/flex/halo"
                           xmlns:ns="library://ns.adobe.com/flex/mx"
                           xmlns:local="*"
                           minWidth="1024" minHeight="768"
                           creationComplete="onCreationComplete()" >
        
        <fx:Script>
                <![CDATA[
                        import mx.collections.ArrayCollection;
                        
                        [Bindable]
                        protected var array:ArrayCollection;

                        protected function onCreationComplete():void
                        {
                                var tmp:Array = [];
                                for (var i:int = 0; i < 100; i++)
                                {
                                        var o:Object = {};
                                        // In my real world case I am using 
different images
                                        o["source"] = 
"http://www.google.com/intl/en_ALL/images/logo.gif";;
                                        tmp.push(o);
                                }
                                array = new ArrayCollection(tmp);
                        }
                ]]>
        </fx:Script>
        
        <s:List height="50%" horizontalCenter="0"
                        useVirtualLayout="true" dataProvider="{array}"
                        itemRenderer="ThumbnailRenderer"/>
</s:Application>


renderer (ThumbnailRenderer.mxml in the local package)
package
{
        import mx.controls.Image;
        
        public class ThumbnailRenderer extends Image
        {
                public static var count:int = 0;
                
                public function ThumbnailRenderer()
                {
                        super();
                        count++;
                        trace(count);
                        // Setting minHeight/minWidth or including some other 
component
                        // who's size can readily be determined fixes the 
problem
                        //minWidth = 40;
                        //minHeight = 40;
                }
                
                override public function set data(value:Object):void
                {
                        super.data = value;
                        this.source = data.source;
                }
        }
}