FLEX DATAGRID 自动滚屏

工作需要表格自动滚动和单元格变色,网上没找到合适的,所以自己做了个小例子,初学FLEX,求交流,抛砖引玉...

?

组件：WindowUI

?

<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" > <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.events.ItemClickEvent; import mx.controls.tabBarClasses.Tab; public var len:int; public var delay:int=600; private var timer:Timer; private static var i:int=0; private function tabBar_itemClick(evt:ItemClickEvent):void { viewStack.selectedIndex = evt.index; } public function initTimer():void { len = arrCollC.length; if(timer){ if(timer.running){ timer.stop(); play.label="循环播放(开始)" }else{ timer.start(); play.label="循环播放(停止)" } }else{ timer = new Timer(delay); timer.addEventListener(TimerEvent.TIMER,timerHandler); timer.start(); play.label="循环播放(停止)" } } private function timerHandler(evt:TimerEvent):void { var now:String = new Date().toTimeString(); if(arrCollC.length > 0) { //根据数据的变化 实现滚动 //arrCollC.addItemAt(arrCollC.getItemAt(0),arrCollC.length); //arrCollC.removeItemAt(0); //根据滚动条 实现滚动 //对于包含 3 个正文行和 1 个标题行的 DataGrid 控件，其 rowCount 属性为 4。 再减一当前执行次数 if(timer.currentCount+tableDemo.rowCount-2 == len) { i=0; tableDemo.verticalScrollPosition=i; timer.reset(); timer.start(); }else{ i+=1; tableDemo.verticalScrollPosition=i; } } } private function mouSEOverThere():void{ if(timer.running){ timer.stop(); autoType.text="1"; }else if(autoType.text=="1"){ timer.start(); autoType.text="0"; } } ]]> </mx:Script> <mx:Style> .tb{ background-color:glay; fill-colors:glay; } </mx:Style> <mx:Array id="arr"> <mx:Object label="省周排名" /> <mx:Object label="城市周排名" /> <mx:Object label="网格周排名" /> <mx:Object label="省月排名" /> <mx:Object label="城市月排名" /> <mx:Object label="网格月排名" /> </mx:Array> <mx:ArrayCollection id="arrCollC"> <mx:source> <mx:Array> <mx:Object col1="A.1" col2="A.2" col3="A.3" col4="A.4"/> <mx:Object col1="B.1" col2="B.2" col3="B.3" col4="B.4"/> <mx:Object col1="C.1" col2="C.2" col3="C.3" col4="C.4"/> <mx:Object col1="D.1" col2="D.2" col3="D.3" col4="D.4"/> <mx:Object col1="E.1" col2="E.2" col3="E.3" col4="E.4"/> <mx:Object col1="F.1" col2="F.2" col3="F.3" col4="F.4"/> <mx:Object col1="A.1" col2="A.2" col3="A.3" col4="A.4"/> <mx:Object col1="B.1" col2="B.2" col3="B.3" col4="B.4"/> <mx:Object col1="C.1" col2="C.2" col3="C.3" col4="C.4"/> <mx:Object col1="D.1" col2="D.2" col3="D.3" col4="D.4"/> <mx:Object col1="E.1" col2="E.2" col3="E.3" col4="E.4"/> <mx:Object col1="F.1" col2="F.2" col3="F.3" col4="F.4"/> <mx:Object col1="A.1" col2="A.2" col3="A.3" col4="A.4"/> <mx:Object col1="B.1" col2="B.2" col3="B.3" col4="B.4"/> <mx:Object col1="C.1" col2="C.2" col3="C.3" col4="C.4"/> <mx:Object col1="D.1" col2="D.2" col3="D.3" col4="D.4"/> <mx:Object col1="E.1" col2="E.2" col3="E.3" col4="E.4"/> <mx:Object col1="F.1" col2="F.2" col3="F.3" col4="F.4"/> <mx:Object col1="E.1" col2="E.2" col3="E.3" col4="E.4"/> <mx:Object col1="F.1" col2="F.2" col3="F.3" col4="F.4"/> <mx:Object col1="A.1" col2="A.2" col3="A.3" col4="A.4"/> <mx:Object col1="B.1" col2="B.2" col3="B.3" col4="B.4"/> <mx:Object col1="C.1" col2="C.2" col3="C.3" col4="C.4"/> <mx:Object col1="D.1" col2="D.2" col3="D.3" col4="D.4"/> <mx:Object col1="E.1" col2="E.2" col3="E.3" col4="E.4"/> <mx:Object col1="F.1" col2="F.2" col3="F.3" col4="F.4"/> <mx:Object col1="A.1" col2="A.2" col3="A.3" col4="A.4"/> <mx:Object col1="B.1" col2="B.2" col3="B.3" col4="B.4"/> <mx:Object col1="C.1" col2="C.2" col3="C.3" col4="C.4"/> <mx:Object col1="D.1" col2="D.2" col3="D.3" col4="D.4"/> <mx:Object col1="E.1" col2="E.2" col3="E.3" col4="E.4"/> <mx:Object col1="F.1" col2="F.2" col3="F.3" col4="F.4"/> <mx:Object col1="A.1" col2="A.2" col3="A.3" col4="A.4"/> <mx:Object col1="B.1" col2="B.2" col3="B.3" col4="B.4"/> <mx:Object col1="C.1" col2="C.2" col3="C.3" col4="C.4"/> <mx:Object col1="D.1" col2="D.2" col3="D.3" col4="D.4"/> <mx:Object col1="E.1" col2="E.2" col3="E.3" col4="E.4"/> <mx:Object col1="F.1" col2="F.2" col3="F.3" col4="F.4"/> <mx:Object col1="E.1" col2="E.2" col3="E.3" col4="E.4"/> <mx:Object col1="F.1" col2="F.2" col3="F.3" col4="F.4"/> <mx:Object col1="A.1" col2="A.2" col3="A.3" col4="A.4"/> <mx:Object col1="B.1" col2="B.2" col3="B.3" col4="B.4"/> <mx:Object col1="C.1" col2="C.2" col3="C.3" col4="C.4"/> <mx:Object col1="D.1" col2="D.2" col3="D.3" col4="D.4"/> <mx:Object col1="E.1" col2="E.2" col3="E.3" col4="E.4"/> <mx:Object col1="F.1" col2="F.2" col3="F.3" col4="F.4"/> <mx:Object col1="A.1" col2="A.2" col3="A.3" col4="A.4"/> <mx:Object col1="B.1" col2="B.2" col3="B.3" col4="B.4"/> <mx:Object col1="C.1" col2="C.2" col3="C.3" col4="C.4"/> <mx:Object col1="D.1" col2="D.2" col3="D.3" col4="D.4"/> <mx:Object col1="E.1" col2="E.2" col3="E.3" col4="E.4"/> <mx:Object col1="F.1" col2="F.2" col3="F.3" col4="F.4"/> </mx:Array> </mx:source> </mx:ArrayCollection> <mx:Text id="autoType" text="0" includeInLayout="true" visible="true" /> <mx:ArrayCollection id="arrColl"> <mx:source> <mx:Array> <mx:Object col1="A.1" col2="A.2" col3="A.3" col4="A.4"/> <mx:Object col1="B.1" col2="B.2" col3="B.3" col4="B.4"/> <mx:Object col1="C.1" col2="C.2" col3="C.3" col4="C.4"/> <mx:Object col1="D.1" col2="D.2" col3="D.3" col4="D.4"/> <mx:Object col1="E.1" col2="E.2" col3="E.3" col4="E.4"/> <mx:Object col1="F.1" col2="F.2" col3="F.3" col4="F.4"/> </mx:Array> </mx:source> </mx:ArrayCollection> <mx:VBox width="100%" height="100%" verticalGap="0"> <mx:TabBar id="tabBar" height="35" width="550" paddingLeft="0" dataProvider="{arr}" itemClick="tabBar_itemClick(event);" styleName="tb" /> <mx:ViewStack id="viewStack" paddingLeft="0" width="{tabBar.width+100}" styleName="plain" height="100%"> <mx:HBox id="redVBox" width="100%" height="100%"> <mx:DataGrid id="tableDemo" dataProvider="{arrCollC}" height="100%" itemRollOut="mouSEOverThere()" itemRollOver="mouSEOverThere()" > <mx:columns> <mx:DataGridColumn dataField="col1" /> <mx:DataGridColumn dataField="col2" /> <mx:DataGridColumn dataField="col3" > <mx:itemRenderer> <mx:Component> <mx:HBox> <mx:Script> <![CDATA[ import mx.controls.Alert; import flash.profiler.showRedrawRegions; override public function set data( value:Object ) : void { super.data = value; var i:Number=Math.random(); if(i>0.7){ setStyle("backgroundColor",0x00FF33); }else if(i>0.5){ setStyle("backgroundColor",0xFFFF33); }else if(i>0.3){ setStyle("backgroundColor",0xfdfdfd); } } ]]> </mx:Script> <mx:Text text="{data.col3}" /> </mx:HBox> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> <mx:VBox> <mx:VBox> <mx:DataGrid dataProvider="{arrColl}"> <mx:columns> <mx:DataGridColumn dataField="col1" /> <mx:DataGridColumn dataField="col2" /> <mx:DataGridColumn dataField="col3" /> </mx:columns> </mx:DataGrid> <mx:DataGrid dataProvider="{arrColl}"> <mx:columns> <mx:DataGridColumn dataField="col1" /> <mx:DataGridColumn dataField="col2" /> <mx:DataGridColumn dataField="col3" /> </mx:columns> </mx:DataGrid> <mx:ControlBar id="cBar"> <mx:Button id="play" label="循环播放(开始)" click="initTimer()" /> <mx:Button label="Cancel" /> </mx:ControlBar> </mx:VBox> </mx:VBox> </mx:HBox> <mx:VBox id="orangeVBox" width="100%" height="100"> <mx:Label text="Orange VBox" /> </mx:VBox> <mx:VBox id="yellowVBox" width="100%" height="100"> <mx:Label text="Yellow VBox" /> </mx:VBox> <mx:VBox id="greenVBox" width="100%" height="100"> <mx:Label text="Green VBox" /> </mx:VBox> <mx:VBox id="blueVBox" width="100%" height="100"> <mx:Label text="Blue VBox" /> </mx:VBox> <mx:VBox id="otherVBox" width="100%" height="100"> <mx:Label text="Other VBox" /> </mx:VBox> </mx:ViewStack> </mx:VBox> </mx:Canvas>