Creating multi-line list rows with variable row heights

HTTPService, List, ,

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.

9 thoughts on “Creating multi-line list rows with variable row heights”

    1. @JabbyPanda,

      Multi-line still works (at least it does in 3.4), it just wraps in a different spot. How/where were you expecting it to wrap if you set the horizontal scroll policy?

      Peter

  4. Looks good, but I have one problem with it, when I scroll using the mouse wheel, it also scrolls the label text, so I lose lines of the content

    1. @Mike,

      You could probably build a custom item renderer with a horizontal line at the top. You could probably use the rowIndex property in the custom item renderer to prevent the top item renderer from displaying its separator.

      Peter

      1. Actually, I believe it may be itemIndex and not rowIndex, my bad.
        This may do what you’re looking for:

        <?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/mx">
 
    <s:List id="lst"
            labelField="fontName"
            itemRenderer="skins.DottedItemRen"
            x="20" y="20">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedRowCount="8" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList source="{Font.enumerateFonts(true).sortOn('fontName')}" />
        </s:dataProvider>
    </s:List>
 
</s:Application>

        And the custom Spark Item renderer, skins/DottedItemRen.mxml, is as follows:

        <?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer name="DottedItemRen"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" 
        autoDrawBackground="true"
        dataChange="dataChangeHandler(event);">
 
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
 
            protected function dataChangeHandler(evt:FlexEvent):void {
                imageDisplay.visible = (itemIndex > 0);
            }
        ]]>
    </fx:Script>
 
    <s:BitmapImage id="imageDisplay" source="@Embed('skins/dotted.jpg')" left="0" right="0" top="0" fillMode="repeat" />
    <s:Label id="labelDisplay" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="4"/>
 
</s:ItemRenderer>

        Peter

Comments are closed.