Scrolling to a specific index in a Spark List control in Flex 4

In a previous example, “Scrolling to a specific index in a Flex List control”, we saw how you could scroll to a specific item index in Flex by using the scrollToIndex() method.

The following example shows how you can scroll to a specific item index in a Spark List control in Flex 4 by using the ensureIndexIsVisible() method.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/12/scrolling-to-a-specific-index-in-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_ensureIndexIsVisible_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="ensureIndexIsVisible():">
                <s:HSlider id="sl1" 
                        minimum="0"
                        maximum="{list.dataProvider.length-1}"
                        change="sl1_changeHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="selectedIndex:">
                <s:HSlider id="sl2"
                        minimum="-1"
                        maximum="{list.dataProvider.length-1}"
                        value="-1"/>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function sl1_changeHandler(evt:Event):void {
                list.ensureIndexIsVisible(sl1.value);
            }
 
            protected function list_labelFunc(item:Object):String {
                return item.index + ") " + item.label;
            }
        ]]>
    </fx:Script>
 
    <s:List id="list"
            labelFunction="list_labelFunc" 
            selectedIndex="{sl2.value}"
            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>

[GoogleAdsWide]

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

6 thoughts on “Scrolling to a specific index in a Spark List control in Flex 4

  1. So I have an interesting situation that I can’t quite get a grasp on. I have a list that has both horizontal and vertical scroll enabled. I swap out items from the list often. The situation I’m running into is that the horizontal scroll max always stays at the highest value it’s ever been.

    I have an ArrayCollection I’m binding the list’s dataProvider to.

    When I have an item with a very long text value – the horizontal scroll bar behaves as you would expect, sizes properly, and allows me to scroll horizontally as far as I need to.

    When I reset the ArrayCollection (items = new ArrayCollection()) and set the new values, this time with shorter titles , the horizontal scrollbar doesn’t resize and still allows me to scroll far to the right, even the the list items are much shorter.

    Adding longer and longer items will adjust the horizontal scroll bar, but removing them and dropping in shorter items doesn’t.

    Any ideas? I would drop in a code sample, but my block is dependent on a lot of other pieces and it really is just a list with a dataProvider. I have a custom ItemRenderer in there too, but that shouldn’t break the horizontal scroll behavior should it?

    Anyway, any ideas would be greatly appreciated!

    Thank you!

  2. ensureIndexIsVisible doesn’t work property if the row 10-20 lines tall. The List simply scrolls to ensure the top of the row is visible. The bottom 80% remains not visible.

  3. Could you provide an example of this sort of thing for an AdvancedDataGrid? I can get it to scrollToIndex, but it’s the index provided by the GroupingCollection2′s source, and not the actual index of the ADG. I believe this is because the ADG’s dataProvider is set by the source property of a GroupingCollection2, and the dataProvider itself is of type HierarchicalCollectionView. I don’t know how to fix this, and would appreciate some help. Thanks.

  4. When is the proper time to call ensureIndexIsVisible for prepopulated lists, with default selections?

    I have a SkinnablePopupContainer that has a couple lists with default selections set before the popup is opened. I populate the lists, set the selected index, and call ensureIndexIsVisible in the creationComplete handler, but it does not work properly. When the popup appears, the lists have been scrolled a little, but not all the way down to the selected item. I believe it has something to do with the scrolling happening before the component is visible, and the scroll units not being correctly set at that time. Not sure if this matters, but it is a mobile app.

Comments are closed.