If you want to implement lazy loading (when the user scrolls to the end of the list it triggers to fetch more items) for a spark List control you have to use a workaround right now.
Usually you would add an event listener on the scrollers verticalScrollBar but due to a bug it does not fire events if the user scroll with the mouse wheel or uses the arrow buttons. The bug shows a workaround by listening to the PropertyChangeEvent of the scrollers viewport.
Here a little example app:
The bug has been fixed for Flex 4.5. If there is a better workaround for Flex 4.1 please let me know.
Heres the code to use with a Spark List
protected function layoutPropertyChangeHandler(event:PropertyChangeEvent):void
{
if (event.property == “verticalScrollPosition”)
{
var v:VerticalLayout = VerticalLayout(list.layout);
var lastIndexInView:int = v.lastIndexInView;
var count:int = dp.length;
if (lastIndexInView >= count – 1)
{
//load more items
}
else
{
}
}
}
[...] This post was mentioned on Twitter by Nany Oliveira and envatoactive, Eric Snowden. Eric Snowden said: Detect Spark List Control Scroll To End http://goo.gl/fb/dCIDr [...]
Hey.
I spent a lot of time working with these kinds of “controls” and i believe u should use the layout property.
There is a method on layouBase classe getHorizontalScrollPositionDelta(unit:NavigationUnit) or getVerticalScrollPositionDelta(unit:NavigationUnit) thats returns the value distance from the NavigationUnit, so you can ask the layout about the distance to the end, just calling layou.getHorizontalScrollPositionDelta(NavigationUnit.END), if its is equals 0, so you are in the end.
[]‘s
Thanks Thiago, I already switched using the layout property like mentioned in the previous comment but using layout.getHorizontalScrollPositionDelta(NavigationUnit.END) seems even more elegant.
Cool, thanks for posting this. So how do we get the little graphics or words at the end or top of the scroller to let the user know they can pull to load or refresh items?
you would have to build a custom component
Thanks alot
It was really very helpful.
[...] things first, you need to detect when you’ve scrolled to the bottom of the list. Here’s a great example showing how to detect when you have scrolled to the bottom of the list. You can just add an event [...]