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.
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;
}
}