Waterfall layout not working with DefaultListItemRenderer when icon/accessory loaded from URL with ImageLoader

[khoamoc]

Hi, there's some bugs with Waterfall layout when using DefaultListItemRenderer, all other layouts work ok,

in the code below :

        _list = new List();

        this.addChild( _list );

        //populate your own dataProvider with text and thumb elements
        var:dataProvider:Array = [
            { "text":"abc", "thumb":"http://xxxx" },
            { "text":"aaa", "thumb":"http://xxxx" },
            { "text":"bbb", "thumb":"http://xxxx" },
            { "text":"ccc", "thumb":"http://xxxx" },
        ];
        var groceryList:ListCollection = new ListCollection( dataProvider );

        _list.dataProvider = groceryList;

        _list.itemRendererFactory = function():IListItemRenderer
        {
            var renderer:DefaultListItemRenderer = new DefaultListItemRenderer();
            renderer.labelField = "text";
            //renderer.itemHasLabel = false;
            renderer.iconSourceField = "thumb";
            renderer.isQuickHitAreaEnabled = true;
            renderer.itemHasAccessory = false;
            renderer.iconPosition = DefaultListItemRenderer.ICON_POSITION_TOP;
            return renderer;
        };

        // TiledRowsLayout : WORKS
        //var _listLayout:TiledRowsLayout = new TiledRowsLayout();
        //_listLayout.horizontalAlign = TiledRowsLayout.HORIZONTAL_ALIGN_LEFT;

        //WaterfallLayout: NOT WORKING, only works when: renderer.itemHasLabel = false;
        var _listLayout:WaterfallLayout = new WaterfallLayout();
         _listLayout.horizontalAlign = WaterfallLayout.HORIZONTAL_ALIGN_CENTER;

        _list.layout = _listLayout;

        _listLayout.requestedColumnCount = 3;

        _listLayout.gap = 10;

        _listLayout.padding = _listLayout.gap;

[joshtynjala]

The problem is that the images aren't loaded yet when the WaterfallLayout needs to calculate the width of a column. It can only use the width of the label, which may not be the same size as the width of an image. It sets the width property of each item renderer to whatever it calculates, and after that point, the item renderers cannot resize.

You could simply set the width of the item renderer to a fixed value:

renderer.width = 270; // just some arbitrary value for this example

Alternatively, you could calculate a value based on the stage width:

renderer.width = stage.stageWidth / 4;

Another option is to provide a typicalItem to the List.

var quad:Quad = new Quad(270, 100);
_list.typicalItem = { text: "xyz", measureThumb: quad };

Then, you can set the iconField on the item renderer. The item renderer is smart enough to figure out if it needs to use iconField or iconSourceField based on what properties are set on the item.

renderer.iconSourceField = "thumb";
renderer.iconField = "measureThumb";