直接上代码:(翻了一天的时间测试出来的,汗)

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

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

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

 
  
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"> 
  3.     <mx:Script> 
  4.         <![CDATA[ 
  5.             import mx.collections.ArrayCollection; 
  6.             import mx.controls.Alert; 
  7.             import mx.core.ScrollPolicy; 
  8.             import mx.events.ListEvent; 
  9.             import mx.events.ScrollEvent; 
  10.              
  11.             import org.hamcrest.mxml.collection.EveryItem; 
  12.              
  13.             [Bindable] 
  14.             public var arrCollection:ArrayCollection=new ArrayCollection([ 
  15.                 {"id":1,"title":"标题1"}, 
  16.                 {"id":2,"title":"标题2"}, 
  17.                 {"id":3,"title":"标题3"}, 
  18.                 {"id":4,"title":"标题4"}, 
  19.                 {"id":5,"title":"标题5"}, 
  20.                 {"id":6,"title":"标题6"}, 
  21.                 {"id":7,"title":"标题7"}, 
  22.                 {"id":8,"title":"标题8"}, 
  23.                 {"id":9,"title":"标题9"}, 
  24.                 {"id":10,"title":"标题10"}, 
  25.                 {"id":11,"title":"标题11"}, 
  26.                 {"id":12,"title":"标题12"}, 
  27.                 {"id":13,"title":"标题13"}, 
  28.                 {"id":14,"title":"标题14"} 
  29.             ]); 
  30.              
  31.             private var timer:Timer; 
  32.             private var stepNumber:Number=10; 
  33.             protected function dg1_itemClickHandler(event:ListEvent):void 
  34.             { 
  35.                 timer=new Timer(0); 
  36.                 timer.repeatCount=dg1.height/stepNumber; 
  37.                 timer.addEventListener(TimerEvent.TIMER,app1); 
  38.                 timer.start(); 
  39.             } 
  40.              
  41.             private function app1(evt:TimerEvent):void{ 
  42.                 vboxbgg.verticalScrollPosition+=stepNumber; 
  43.                 if(vboxbgg.verticalScrollPosition>=dg1.height){ 
  44.                     vboxbgg.verticalScrollPosition=dg1.height; 
  45.                     timer.stop(); 
  46.                 } 
  47.             } 
  48.              
  49.             protected function dg2_itemClickHandler(event:ListEvent):void 
  50.             { 
  51.                 timer=new Timer(0); 
  52.                 timer.repeatCount=(dg1.height+dg2.height)/stepNumber; 
  53.                 timer.addEventListener(TimerEvent.TIMER,app2); 
  54.                 timer.start(); 
  55.             } 
  56.              
  57.             private function app2(evt:TimerEvent):void{ 
  58.                 vboxbgg.verticalScrollPosition+=stepNumber; 
  59.                 if(vboxbgg.verticalScrollPosition>=dg1.height+dg2.height){ 
  60.                     vboxbgg.verticalScrollPosition=dg1.height+dg2.height; 
  61.                     timer.stop(); 
  62.                 } 
  63.             } 
  64.              
  65.             protected function button1_clickHandler(event:MouseEvent):void 
  66.             { 
  67.                 vboxbgg.verticalScrollPosition=0; 
  68.             } 
  69.         ]]> 
  70.     </mx:Script> 
  71.     <!-- flex3 关键代码  height="{this.height}" 高度必须是个固定值,不能是100% --> 
  72.     <mx:VBox width="100%" height="{this.height}" id="vboxbgg"> 
  73.          
  74.         <mx:DataGrid id="dg1" width="100%" height="150" dataProvider="{arrCollection}" paddingRight="100" 
  75.                      itemClick="dg1_itemClickHandler(event)" 
  76.                      verticalScrollPolicy="on"> 
  77.             <mx:columns> 
  78.                 <mx:DataGridColumn dataField="id" headerText="序号1"/> 
  79.                 <mx:DataGridColumn dataField="title" headerText="标题1"/> 
  80.             </mx:columns> 
  81.         </mx:DataGrid> 
  82.         <mx:DataGrid id="dg2" width="100%" height="200" dataProvider="{arrCollection}" 
  83.                      verticalScrollPolicy="on" itemClick="dg2_itemClickHandler(event)"> 
  84.             <mx:columns> 
  85.                 <mx:DataGridColumn dataField="id" headerText="序号2"/> 
  86.                 <mx:DataGridColumn dataField="title" headerText="标题2"/> 
  87.             </mx:columns> 
  88.         </mx:DataGrid> 
  89.         <mx:DataGrid id="dg3" width="100%" height="500" dataProvider="{arrCollection}"> 
  90.             <mx:columns> 
  91.                 <mx:DataGridColumn dataField="id" headerText="序号3"/> 
  92.                 <mx:DataGridColumn dataField="title" headerText="标题3"/> 
  93.             </mx:columns> 
  94.         </mx:DataGrid> 
  95.         <mx:Button click="button1_clickHandler(event)" label="返回顶端"/> 
  96.     </mx:VBox> 
  97. </mx:Application>