Comments on: Creating multi-line list rows with variable row heights http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/ Just a bunch of Adobe Flex Examples Sun, 12 Feb 2012 19:26:49 +0000 hourly 1 By: Peter deHaan http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/comment-page-1/#comment-8455 Peter deHaan Mon, 18 Oct 2010 18:48:21 +0000 http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/#comment-8455 Actually, I believe it may be <code>itemIndex</code> and not <code>rowIndex</code>, my bad. This may do what you're looking for: <pre lang="mxml"> <?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> </pre> And the custom Spark Item renderer, <em>skins/DottedItemRen.mxml</em>, is as follows: <pre lang="mxml"> <?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> </pre> Peter 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

]]> By: Peter deHaan http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/comment-page-1/#comment-8453 Peter deHaan Mon, 18 Oct 2010 15:55:52 +0000 http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/#comment-8453 @Mike, You could probably build a custom item renderer with a horizontal line at the top. You could probably use the <code>rowIndex</code> property in the custom item renderer to prevent the top item renderer from displaying its separator. Peter @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

]]> By: Mike http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/comment-page-1/#comment-8452 Mike Mon, 18 Oct 2010 15:43:30 +0000 http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/#comment-8452 Can you create gridlines in this List Control? In other words a line dividing each row? thanks -Mike Can you create gridlines in this List Control? In other words a line dividing each row?

thanks

-Mike

]]> By: Damian http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/comment-page-1/#comment-7692 Damian Thu, 13 May 2010 00:18:39 +0000 http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/#comment-7692 You can find the solution to the above bug at the following link: http://stackoverflow.com/questions/2816542/scrolling-through-list-element-causes-text-elements-to-scroll-as-well You can find the solution to the above bug at the following link: http://stackoverflow.com/questions/2816542/scrolling-through-list-element-causes-text-elements-to-scroll-as-well

]]> By: Damian http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/comment-page-1/#comment-7688 Damian Wed, 12 May 2010 01:44:25 +0000 http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/#comment-7688 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 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

]]> By: Peter deHaan http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/comment-page-1/#comment-6340 Peter deHaan Thu, 12 Nov 2009 15:12:56 +0000 http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/#comment-6340 @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 @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

]]> By: JabbyPanda http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/comment-page-1/#comment-6335 JabbyPanda Thu, 12 Nov 2009 10:19:05 +0000 http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/#comment-6335 If we will set on horizontalScrollPolicy="on" then multi-line will not work, I guess it is a feature. If we will set on horizontalScrollPolicy=”on” then multi-line will not work, I guess it is a feature.

]]> By: peterd http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/comment-page-1/#comment-1685 peterd Mon, 29 Oct 2007 14:38:33 +0000 http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/#comment-1685 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 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

]]> By: maliboo http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/comment-page-1/#comment-1686 maliboo Mon, 29 Oct 2007 09:52:07 +0000 http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/#comment-1686 Is there any switch to freeze scroll thumb size? Is there any switch to freeze scroll thumb size?

]]>