Scrolling to a specific index in a Flex List control

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>

[GoogleAdsWide]

View source is enabled in the following example.

10 thoughts on “Scrolling to a specific index in a Flex List control

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

    1. @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

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

  3. 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…

Comments are closed.