List with multilined (word wrapping) item renderer - how to scroll to the bottom? With test case and screenshots

In a Flex 4 web application I am trying to use a spark.components.List for a chat (for various reasons - it works well for me in a Flex mobile app already), but because I use an item renderer which can be multilined (i.e. wraps too long lines) I have the problem, that I can not scroll the list to its bottom by calling its ensureIndexIsVisible method:

I have prepared a very simple test. These are just 2 files, which will work instantly, when you put them into a new Flex project in Flash Builder -

MyApp.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"
    applicationComplete="init()">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;

            private static const MONTHS:ArrayList = new ArrayList([
                "1 January is a beautyful month", 
                "2 February is a very very very very very very very very very very very very very very very beautyful month", 
                "3 March is a beautyful month", 
                "4 April is a beautyful month", 
                "5 May is a beautyful month", 
                "6 June is a beautyful month", 
                "7 July is a beautyful month", 
                "8 August is a beautyful month", 
                "9 September is a beautyful month", 
                "10 October is a beautyful month", 
                "11 November is a beautyful month",
                "12 December is a beautyful month"
            ]);

            private function init():void {
                myList.ensureIndexIsVisible(MONTHS.length - 1); 
            }
        ]]>

    </fx:Script>

    <s:List id="myList"
            horizontalCenter="0"
            verticalCenter="0"
            width="100"
            height="300"
            dataProvider="{MONTHS}"
            itemRenderer="MyRenderer"
            horizontalScrollPolicy="off">

        <s:layout>
            <s:VerticalLayout variableRowHeight="true" 
                              horizontalAlign="justify"/>
        </s:layout>
    </s:List>
</s:Application>

MyRenderer.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    autoDrawBackground="false">

    <fx:Script> 
        <![CDATA[    
            [Bindable]
            public var myColor:uint = 0xFFFFFF;

            override public function set data(value:Object):void {
                var label:String = value as String;
                labelDisplay.text = label; 

                if (label.indexOf("June") >= 0)
                    myColor = 0xFFEEEE;
                else if (label.indexOf("July") >= 0)
                    myColor = 0xEEFFEE;
                else if (label.indexOf("August") >= 0)
                    myColor = 0xEEEEFF;
                else 
                    myColor = 0xFFFFFF;
            } 
        ]]> 
    </fx:Script>

    <s:Rect width="100%" height="100%">
        <s:fill>
            <s:SolidColor color="{myColor}" />
        </s:fill>
    </s:Rect>

    <s:Label id="labelDisplay" 
             width="100%"
             left="4" 
             top="4" />
</s:ItemRenderer>

Please take a look and advise me, how to scroll the list to its very bottom.

Should I somehow use myList.dataGroup for that? Or maybe the layout.verticalScrollPosition?

I also tried callLater(myList.ensureIndexIsVisible, [MONTHS.length - 1]) but that didn't help.

Answers


Found the answer myself at the Flexponential blog Scrolling to the bottom of a spark List:

    public static function scrollToBottom(list:List):void {
        // update the verticalScrollPosition to the end of the List
        // virtual layout may require us to validate a few times
        var delta:Number = 0;
        var count:int = 0;

        while (count++ < 10) {
            list.validateNow();
            delta = list.layout.getVerticalScrollPositionDelta(NavigationUnit.END);
            list.layout.verticalScrollPosition += delta;

            if (delta == 0)
                break;
        }
    }           

Need Your Help

What are some good smartphone emulators for web development on mac os x?

osx testing mobile-website

I am looking for some good smartphone emulators for web development on mac os x.

Alternatives to GWO (Google Website Optimizer)?

javascript google-analytics google-website-optimizer multivariate-testing optimizely

We're using GWO (Google Website Optimizer) now. The multivariate and A/B testing is exactly what we need and works great from the perspective of showing the variations to the users. However, we h...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.