直接上代码:(翻了一天的时间测试出来的,汗)
点击第一个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>