Creating multi-line list rows with variable row heights

The following example shows how you can create multi-line rows with wrapping text and variable row heights with the Flex List control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;

            private function init():void {
                commentsXML.send();
            }

            private function commentsXML_result(evt:ResultEvent):void {
                var resultXML:XML = evt.currentTarget.lastResult;
                list.dataProvider = resultXML.channel.item;
            }

            private function commentsXML_fault(evt:FaultEvent):void {
                mx.controls.Alert.show("Unable to load XML:\n" + commentsXML.url, "ERROR");
            }
        ]]>
    </mx:Script>

    <mx:HTTPService id="commentsXML"
            url="http://blog.flexexamples.com/comments/feed/"
            resultFormat="e4x"
            showBusyCursor="true"
            result="commentsXML_result(event);"
            fault="commentsXML_fault(event);" />

    <mx:List id="list"
            variableRowHeight="true"
            wordWrap="true"
            labelField="title"
            width="250" />

</mx:Application>

View source is enabled in the following example.

Tagged as: showBusyCursor, variableRowHeight, wordWrap