How to make items in a list word wrap as needed and be variable heights

Question

I am trying to build a custom itemrenderer for the List control.  The items in the list are variable lengths of text, some of the text items will have different colors determined at runtime base on some criteria (this works fine now with my custom itemrenderer).  What I need is for the items to word wrap, and therefore for the list to display items of varying heights.  Is this possible to do?  All my attempts seem to have failed.  If I can't do this with an item renderer any suggestions about how to do this?  Thanks very much in advance to any of you gurus who are able to help me.

Answer 1

Trick here is not to specify any height for the renderer so that Flex will determine the height according to the content. Also set the variableRowHeight="true"
Here is a simple example
<mx:ArrayCollection id="dp">
        <mx:Array>
            <mx:Object label="some very long text"/>
            <mx:Object label="some very loooooooooooooooooooooooooooooooooong text"/>
            <mx:Object label="some very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text"/>
            <mx:Object label="some very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text"/>
            <mx:Object label="some very long text"/>
        </mx:Array>
    </mx:ArrayCollection>
    <mx:List dataProvider="{dp}" variableRowHeight="true">
        <mx:itemRenderer>
            <mx:Component>
                <mx:Canvas width="100%">
                    <mx:Text width="100%" text="{data.label}"/>
                </mx:Canvas>
            </mx:Component>
        </mx:itemRenderer>
    </mx:List>