flex3:创建一个分页的DataGrid

使用flex的DataGrid组件，如果条目过多就会出现滚动条。有时不想让它出现滚动条，但是又要浏览所有的条目，那该怎么办呢？最好办法的就是使用分页导航。

如何实现分页呢？

其实只要知道DataGird有个VerticalScrollPosition就很容易解决这个问题了。怎么理解这个VerticalScrollPosition呢？比如有1 2 3 4 5 6 7 8 9 标号的含有9个条目的list。这个list只能显示5个条目，其他只有拖动滚动条才能实现。现在拖动滚动条，第一条消失了，list的第一个显示条目变成了2，那么此时的VerticalScrollPosition为1。当第一个显示条目变成了5，那么VerticalScrollPosition就为4。就是这个样子。懂得了这个，分页导航就很容易了。

下面是源代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.events.IndexChangedEvent;
            import mx.controls.Label;
            import mx.collections.ArrayCollection;
            private var index:int;
            private var currentPage:int;
            [Bindable]
            private var array:ArrayCollection=new ArrayCollection();
            //准备数组
            private function initArray():void{
                for(var i:int=20;i>0;i--){
                    var obj:Object=new Object();
                    obj.name='小猪猪';
                    obj.id=i;
                    array.addItemAt(obj,0);
                }
            }
            
            private function generatePage():void{
                //<<
                var pre:Label=new Label();
                pre.text="<<";
                pre.addEventListener(MouseEvent.CLICK,doPrevious);
                nav.addChild(pre);
                
                //12345
                for(var i:int=1;i<=index;i++){
                    var pp:Label=new Label();
                    pp.text=i.toString();
                    pp.addEventListener(MouseEvent.CLICK,toWhichPage);
                    nav.addChild(pp);
                }
                
                //>>
                var ne:Label=new Label();
                ne.text=">>";
                ne.addEventListener(MouseEvent.CLICK,doNext);
                nav.addChild(ne);
            }
            
            private function init():void{
                initArray();
                index=array.length/5;
                generatePage();
                currentPage=1;
            }
            
            private function doPrevious(event:MouseEvent):void{
                if(currentPage>1){
                    navigateTo(currentPage-1);
                }
            }
            
            private function doNext(event:MouseEvent):void{
                if(currentPage<index){
                    navigateTo(currentPage+1);
                }
            }
            
            private function toWhichPage(event:Event):void{
                var toPage:Number=Number((event.currentTarget as Label).text);
                navigateTo(toPage);
            }
            
            private function navigateTo(toPage:int):void{
                dg.verticalScrollPosition=5*(toPage-1);
                currentPage=toPage;
            }
            
        ]]>
    </mx:Script>
    <mx:VBox x="50" y="50">
        <mx:HBox id="nav">
        </mx:HBox>
        
        <mx:DataGrid dataProvider="{array}" rowCount="5" verticalScrollPolicy="off" id="dg"/>
    </mx:VBox>
</mx:Application