The following example shows how you can scroll to a specific item index in Flex by using the scrollToIndex() method.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/08/scrolling-to-a-specific-index-in-a-flex-list-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var arrColl:ArrayCollection;
private function init():void {
var arr:Array = [];
var n:uint = 50;
var i:uint;
for (i = 0; i < n; i++) {
arr.push({label:"item " + i, data:i});
}
arrColl = new ArrayCollection(arr);
list.dataProvider = arrColl;
numericStepper.maximum = arrColl.length - 1;
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="scrollToIndex(n):">
<mx:NumericStepper id="numericStepper"
change="list.scrollToIndex(event.value);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:List id="list"
rowCount="5"
width="100" />
</mx:Application>
View source is enabled in the following example.
{ 6 comments… read them below or add one }
Is there anyway to make it so the list kinda “iPhone” like scrolls to the selected index? I have no idea how to do this, but it would be cool :)
Sweet, I have been looking for some way to do this.
Helpful post, thanks.
That was helpful!
Thank you so much!
Do you know how to scroll to index in flex 4 spark list?
There is no method scrollToIndex.
@Marcin,
In Flex 4/Spark, the API is called
ensureIndexIsVisible(). Apparently I haven’t done an entry on that yet, but here’s an example:Peter