Products
Technologies

Developer resources

Detecting when the vertical scroll bar is scrolled on a Spark List control in Flex 4

Avg. Rating 3.0

Problem

You need to know how you can detect when the vertical scroll bar is scrolled on a Spark List control in Flex 4.

Solution

You can detect when the vertical scroll bar is scrolled on a Spark List control in Flex 4 by listening for the change event on the List control’s VScrollBar instance.

Detailed explanation

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/31/detecting-when-the-vertical-scroll-bar-is-scrolled-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_scroller_verticalScrollBar_change_test"
        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[
            import spark.components.VScrollBar;
            private function init():void {
                list.scroller.verticalScrollBar.addEventListener(Event.CHANGE, list_verticalScrollBar_change);
            }

            private function list_verticalScrollBar_change(evt:Event):void {
                var vsb:VScrollBar = evt.currentTarget as VScrollBar;
                var obj:Object = {};
                obj.type = evt.type;
                obj.val = vsb.value;
                obj.max = vsb.maximum;
                arrColl.addItem(obj);
                callLater(dgScroll);
            }

            private function dgScroll():void {
                dataGrid.verticalScrollPosition = dataGrid.maxVerticalScrollPosition;
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <mx:ArrayCollection id="arrColl" />
    </fx:Declarations>

    <s:HGroup horizontalCenter="0" verticalCenter="0">
        <s:List id="list"
                creationComplete="init();">
            <s:layout>
                <s:VerticalLayout requestedRowCount="4" />
            </s:layout>
            <s:dataProvider>
                <s:ArrayList>
                    <fx:String>The</fx:String>
                    <fx:String>Quick</fx:String>
                    <fx:String>Brown</fx:String>
                    <fx:String>Fox</fx:String>
                    <fx:String>Jumps</fx:String>
                    <fx:String>Over</fx:String>
                    <fx:String>The</fx:String>
                    <fx:String>Lazy</fx:String>
                    <fx:String>Dog</fx:String>
                </s:ArrayList>
            </s:dataProvider>
        </s:List>
        <mx:DataGrid id="dataGrid"
                dataProvider="{arrColl}"
                width="200"
                verticalScrollPolicy="on">
            <mx:columns>
                <mx:DataGridColumn dataField="type" />
                <mx:DataGridColumn dataField="val" />
                <mx:DataGridColumn dataField="max" />
            </mx:columns>
        </mx:DataGrid>
    </s:HGroup>

</s:Application>

For more information, see the original post (as well as many others) on FlexExamples.com.

Report abuse

Related recipes