Creating multi-line list rows with variable row heights

By On October 27, 2007 · 9 Comments

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 with: • •
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

9 Responses to Creating multi-line list rows with variable row heights

  1. maliboo says:
    October 29, 2007 at 2:52 am

    Is there any switch to freeze scroll thumb size?

  2. peterd says:
    October 29, 2007 at 7:38 am

    maliboo,

    I don’t believe you can freeze the scroll thumb size. You can try filing an enhancement request in the public Flex bug system at http://bugs.adobe.com/flex/.

    Peter

  3. JabbyPanda says:
    November 12, 2009 at 2:19 am

    If we will set on horizontalScrollPolicy=”on” then multi-line will not work, I guess it is a feature.

    • Peter deHaan says:
      November 12, 2009 at 7:12 am

      @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. Damian says:
    May 11, 2010 at 6:44 pm

    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

  5. Mike says:
    October 18, 2010 at 8:43 am

    Can you create gridlines in this List Control? In other words a line dividing each row?

    thanks

    -Mike

    • Peter deHaan says:
      October 18, 2010 at 8:55 am

      @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

      • Peter deHaan says:
        October 18, 2010 at 11:48 am

        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