The following example shows how you can scroll to a specific item index in Flex by using the scrollToIndex() method.

<?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.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

10 Responses to Scrolling to a specific index in a Flex List control

  1. Nate says:

    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 :)

  2. List of says:

    Sweet, I have been looking for some way to do this.
    Helpful post, thanks.

  3. Benjamin says:

    That was helpful!

  4. Benjamin says:

    Thank you so much!

  5. Marcin says:

    Do you know how to scroll to index in flex 4 spark list?
    There is no method scrollToIndex.

    • Peter deHaan says:

      @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:

      <?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/halo">
       
          <fx:Script>
              <![CDATA[
                  protected function slider_changeHandler(evt:Event):void {
                      list.ensureIndexIsVisible(slider.value);
                  }
       
                  protected function list_labelFunc(item:Object):String {
                      return item.index + ") " + item.label;
                  }
              ]]>
          </fx:Script>
       
          <s:HSlider id="slider" 
                  minimum="0" maximum="{list.dataProvider.length-1}"
                  change="slider_changeHandler(event)" />
       
          <s:List id="list"
                  labelFunction="list_labelFunc" 
                  horizontalCenter="0" verticalCenter="0">
              <s:layout>
                  <s:VerticalLayout gap="0"
                          horizontalAlign="contentJustify"
                          requestedRowCount="5" />
              </s:layout>
              <s:dataProvider>
                  <s:ArrayList>
                      <fx:Object label="One"       index="0" />
                      <fx:Object label="Two"       index="1" />
                      <fx:Object label="Three"     index="2" />
                      <fx:Object label="Four"      index="3" />
                      <fx:Object label="Five"      index="4" />
                      <fx:Object label="Six"       index="5" />
                      <fx:Object label="Seven"     index="6" />
                      <fx:Object label="Eight"     index="7" />
                      <fx:Object label="Nine"      index="8" />
                      <fx:Object label="Ten"       index="9" />
                      <fx:Object label="Eleven"    index="10" />
                      <fx:Object label="Twelve"    index="11" />
                      <fx:Object label="Thirteen"  index="12" />
                      <fx:Object label="Fourteen"  index="13" />
                      <fx:Object label="Fifteen"   index="14" />
                      <fx:Object label="Sixteen"   index="15" />
                      <fx:Object label="Seventeen" index="16" />
                      <fx:Object label="Eighteen"  index="17" />
                      <fx:Object label="Ninteen"   index="18" />
                      <fx:Object label="Twenty"    index="19" />
                  </s:ArrayList>
              </s:dataProvider>
          </s:List>
       
      </s:Application>

      Peter

  6. kimbyunggeon says:

    thanks useful infomation :-)
    addtion, how to know selected nodes of hierachical xml?

    i want to scrolling automatically by program.

    i know how to dynamically scrolling use scrollToIndex method.. but can not find a value for it

    please any help..

  7. Vanessa says:

    Hi,

    My list control uses a custom item renderer. I am switching views between a data grid and a list view both containing the same data.
    I need to show the selected item in both views when I switch.
    I have tried scrollToIndex() with even a hard coded value, but the list view just refuses to scroll. Is this because of the custom item renderer component? I am defining my list view as follows:

    <mx:List x="0" y="3" id="listView" width="100%" height="100%"
    		dataProvider="{productData}" 
    		itemClick="displayDetail(event)"
    		itemRenderer="components.ProductListRenderer"
    		alternatingItemColors="[#DAF4F6, #FFFFFF]" themeColor="#2119C4"></mx:List>

    Please help…

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree