Creating a scroll-to list in Flex
Here is an example of how you can create a scroll-to list using the AnimateProperty class. In this example I’m using a repeater instead of a List for simplicity, but for large data sets this would not be recommended.
I have a DataGrid on the left hand side that simply lists the release date and title of several upcoming movie releases. If you click on a row, the list on the right will scroll to the details for the movie selected.
The code is pretty straightforward, but there two main pieces to look at. The first is how to use the AnimateProperty class to scroll the list to the desired location. The second, is how to allow the last item in the list to scroll all the way to the top.
Scrolling to an item in the list
import mx.effects.easing.Sine;
import mx.effects.AnimateProperty;
import mx.events.ListEvent;
private var scrollAnimation:AnimateProperty = new AnimateProperty();
private function scrollToMovie(event:ListEvent):y{
import mx.effects.AnimateProperty;
import mx.events.ListEvent;
private var scrollAnimation:AnimateProperty = new AnimateProperty();
private function scrollToMovie(event:ListEvent):y{
var yPosition:int = movieWrapper.getChildAt(event.rowIndex).y;
scrollAnimation.stop();
scrollAnimation.property = "verticalScrollPosition";
scrollAnimation.easingFunction = Sine.easeOut;
scrollAnimation.duration = 900;
scrollAnimation.toValue = yPosition;
scrollAnimation.play([movieWrapper]);
scrollAnimation.stop();
scrollAnimation.property = "verticalScrollPosition";
scrollAnimation.easingFunction = Sine.easeOut;
scrollAnimation.duration = 900;
scrollAnimation.toValue = yPosition;
scrollAnimation.play([movieWrapper]);
}
Allowing the last list item to scroll to the top
private function addSpaceToBottom():void{
if(movieWrapper.numChildren > 2){
var lastChild:HBox = movieWrapper.getChildAt(movieWrapper.numChildren-2) as HBox;
var spacerHeight:int = movieWrapper.height – lastChild.height;
if(spacerHeight > 0)
var spacerHeight:int = movieWrapper.height – lastChild.height;
if(spacerHeight > 0)
spacerBottom.height = spacerHeight;
}
}
Tags: AnimatedProperty, easingFunction, verticalScrollPosition
Thanks a lot for this nice piece of code, a very elegant solution.