Flex verticalScrollPosition动态控制滚动条

直接上代码：（翻了一天的时间测试出来的，汗）

点击第一个DataGrid的item，右侧VBox的滚动条滑动到第二个DataGrid进行显示；

点击第二个DataGrid的item，右侧VBox的滚动条滑动到第三个DataGrid进行显示；

要点:通过控制VBox的verticalScrollPosition属性进行给滚动条定位。

 
 

<?xml?version="1.0"?encoding="utf-8"?>?
  
  
<mx:Application?xmlns:mx="http://www.adobe.com/2006/mxml"?layout="absolute"?minWidth="955"?minHeight="600">?
  
  
????<mx:Script>?
  
  
????????<![CDATA[?
  
  
????????????import?mx.collections.ArrayCollection;?
  
  
????????????import?mx.controls.Alert;?
  
  
????????????import?mx.core.ScrollPolicy;?
  
  
????????????import?mx.events.ListEvent;?
  
  
????????????import?mx.events.ScrollEvent;?
  
  
?????????????
  
  
????????????import?org.hamcrest.mxml.collection.EveryItem;?
  
  
?????????????
  
  
????????????[Bindable]?
  
  
????????????public?var?arrCollection:ArrayCollection=new?ArrayCollection([?
  
  
????????????????{"id":1,"title":"标题1"},?
  
  
????????????????{"id":2,"title":"标题2"},?
  
  
????????????????{"id":3,"title":"标题3"},?
  
  
????????????????{"id":4,"title":"标题4"},?
  
  
????????????????{"id":5,"title":"标题5"},?
  
  
????????????????{"id":6,"title":"标题6"},?
  
  
????????????????{"id":7,"title":"标题7"},?
  
  
????????????????{"id":8,"title":"标题8"},?
  
  
????????????????{"id":9,"title":"标题9"},?
  
  
????????????????{"id":10,"title":"标题10"},?
  
  
????????????????{"id":11,"title":"标题11"},?
  
  
????????????????{"id":12,"title":"标题12"},?
  
  
????????????????{"id":13,"title":"标题13"},?
  
  
????????????????{"id":14,"title":"标题14"}?
  
  
????????????]);?
  
  
?????????????
  
  
????????????private?var?timer:Timer;?
  
  
????????????private?var?stepNumber:Number=10;?
  
  
????????????protected?function?dg1_itemClickHandler(event:ListEvent):void?
  
  
????????????{?
  
  
????????????????timer=new?Timer(0);?
  
  
????????????????timer.repeatCount=dg1.height/stepNumber;?
  
  
????????????????timer.addEventListener(TimerEvent.TIMER,app1);?
  
  
????????????????timer.start();?
  
  
????????????}?
  
  
?????????????
  
  
????????????private?function?app1(evt:TimerEvent):void{?
  
  
????????????????vboxbgg.verticalScrollPosition+=stepNumber;?
  
  
????????????????if(vboxbgg.verticalScrollPosition>=dg1.height){?
  
  
????????????????????vboxbgg.verticalScrollPosition=dg1.height;?
  
  
????????????????????timer.stop();?
  
  
????????????????}?
  
  
????????????}?
  
  
?????????????
  
  
????????????protected?function?dg2_itemClickHandler(event:ListEvent):void?
  
  
????????????{?
  
  
????????????????timer=new?Timer(0);?
  
  
????????????????timer.repeatCount=(dg1.height+dg2.height)/stepNumber;?
  
  
????????????????timer.addEventListener(TimerEvent.TIMER,app2);?
  
  
????????????????timer.start();?
  
  
????????????}?
  
  
?????????????
  
  
????????????private?function?app2(evt:TimerEvent):void{?
  
  
????????????????vboxbgg.verticalScrollPosition+=stepNumber;?
  
  
????????????????if(vboxbgg.verticalScrollPosition>=dg1.height+dg2.height){?
  
  
????????????????????vboxbgg.verticalScrollPosition=dg1.height+dg2.height;?
  
  
????????????????????timer.stop();?
  
  
????????????????}?
  
  
????????????}?
  
  
?????????????
  
  
????????????protected?function?button1_clickHandler(event:MouseEvent):void?
  
  
????????????{?
  
  
????????????????vboxbgg.verticalScrollPosition=0;?
  
  
????????????}?
  
  
????????]]>?
  
  
????</mx:Script>?
  
  
????<!--?flex3?关键代码??height="{this.height}"?高度必须是个固定值，不能是100%?-->?
  
  
????<mx:VBox?width="100%"?height="{this.height}"?id="vboxbgg">?
  
  
?????????
  
  
????????<mx:DataGrid?id="dg1"?width="100%"?height="150"?dataProvider="{arrCollection}"?paddingRight="100"?
  
  
?????????????????????itemClick="dg1_itemClickHandler(event)"?
  
  
?????????????????????verticalScrollPolicy="on">?
  
  
????????????<mx:columns>?
  
  
????????????????<mx:DataGridColumn?dataField="id"?headerText="序号1"/>?
  
  
????????????????<mx:DataGridColumn?dataField="title"?headerText="标题1"/>?
  
  
????????????</mx:columns>?
  
  
????????</mx:DataGrid>?
  
  
????????<mx:DataGrid?id="dg2"?width="100%"?height="200"?dataProvider="{arrCollection}"?
  
  
?????????????????????verticalScrollPolicy="on"?itemClick="dg2_itemClickHandler(event)">?
  
  
????????????<mx:columns>?
  
  
????????????????<mx:DataGridColumn?dataField="id"?headerText="序号2"/>?
  
  
????????????????<mx:DataGridColumn?dataField="title"?headerText="标题2"/>?
  
  
????????????</mx:columns>?
  
  
????????</mx:DataGrid>?
  
  
????????<mx:DataGrid?id="dg3"?width="100%"?height="500"?dataProvider="{arrCollection}">?
  
  
????????????<mx:columns>?
  
  
????????????????<mx:DataGridColumn?dataField="id"?headerText="序号3"/>?
  
  
????????????????<mx:DataGridColumn?dataField="title"?headerText="标题3"/>?
  
  
????????????</mx:columns>?
  
  
????????</mx:DataGrid>?
  
  
????????<mx:Button?click="button1_clickHandler(event)"?label="返回顶端"/>?
  
  
????</mx:VBox>?
  
  
</mx:Application>