问题描述:

I have a data(say for eg. a million rows) to be displayed in a datagrid in a mobile application. I am trying to figure out a way by which as soon as the scroll reaches the end of page ie. the last row on the grid it requests again to the server for next bunch of records.

Scroll event in MX datagrid (http://blog.tremend.ro/2009/03/02/flex-live-scroll-datagrid/) does it with ease but it's not there in spark datagrid. I want this to be done with spark datagrid.

How can i achieve this.

Require help..!!

Thanks

网友答案:

I have quickly compiled an example that works. You can add the listener to scrollbar of datagrid dg as:

dg.scroller.verticalScrollBar.addEventListener(Event.CHANGE, list_verticalScrollBar_change);
private function list_verticalScrollBar_change(evt:Event):void {
            var vsb:VScrollBar = evt.currentTarget as VScrollBar;
            // Now you can check for scroll position.
}

The complete code is as:

<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/mx" minWidth="955" minHeight="600"
               creationComplete="application1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.FlexEvent;

            import spark.components.VScrollBar;

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                dg.scroller.verticalScrollBar.addEventListener(Event.CHANGE, list_verticalScrollBar_change)
            }

            private function list_verticalScrollBar_change(evt:Event):void {
                var vsb:VScrollBar = evt.currentTarget as VScrollBar;
                if(dg.grid.contentHeight == dg.grid.layout.verticalScrollPosition+dg.grid.height) {
                    Alert.show("Making service call");
                    // make some service call.
                }
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:DataGrid id="dg" width="100%" height="100">
        <s:dataProvider>
            <s:ArrayList> 
                <fx:Object age="24" sex="f" name="Susan" joinDate="{new Date(2007, 5, 15)}" />
                <fx:Object age="36" sex="f" name="Ashley" joinDate="{new Date(1998, 7, 20)}" />
                <fx:Object age="24" sex="f" name="Jennifer" joinDate="{new Date(2001, 3, 24)}" />
                <fx:Object age="19" sex="f" name="Emma" joinDate="{new Date(2002, 3, 24)}" />
                <fx:Object age="44" sex="f" name="Carol" joinDate="{new Date(1999, 9, 16)}" />
                <fx:Object age="28" sex="m" name="Peter" joinDate="{new Date(2005, 3, 12)}" />
                <fx:Object age="35" sex="m" name="Mike" joinDate="{new Date(2008, 10, 10)}" />
                <fx:Object age="26" sex="m" name="Dave" joinDate="{new Date(2008, 10, 10)}" />
                <fx:Object age="44" sex="m" name="William" joinDate="{new Date(2004, 9, 16)}" />
                <fx:Object age="24" sex="m" name="Sean" joinDate="{new Date(2006, 3, 24)}" />
            </s:ArrayList> 
        </s:dataProvider>
    </s:DataGrid>
</s:Application>
相关阅读:
Top