Flex中如何通过ArrayCollection对象的collectionChange事件，verticalScrollPosition以及maxVerticalScrollPosition属性创建一个自动滚动的DataGrid的例子

By Minidxer | July 1, 2009

接下来的例子演示了Flex中如何通过ArrayCollection对象的collectionChange事件，verticalScrollPosition以及maxVerticalScrollPosition属性创建一个自动滚动的DataGrid。

让我们先来看一下Demo（可以点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="DataGrid_maxVerticalScrollPosition_text"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white"
  7.         creationComplete="init();">
  8.  
  9.     <mx:Script>
  10.         <![CDATA[
  11.             import mx.events.CollectionEvent;
  12.             private var timer:Timer;
  13.  
  14.             private function init():void {
  15.                 timer = new Timer(500);
  16.                 timer.addEventListener(TimerEvent.TIMER, onTimer);
  17.                 timer.start();
  18.             }
  19.  
  20.             private function onTimer(evt:TimerEvent):void {
  21.                 var now:String = new Date().toTimeString();
  22.                 arrColl.addItem({id:timer.currentCount, time:now});
  23.             }
  24.  
  25.             private function arrColl_collectionChange(evt:CollectionEvent):void {
  26.                 callLater(autoScrollDataGrid);
  27.             }
  28.  
  29.             private function autoScrollDataGrid():void {
  30.                 if (dataGrid) {
  31.                     dataGrid.validateNow();
  32.                     dataGrid.verticalScrollPosition = dataGrid.maxVerticalScrollPosition;
  33.                 }
  34.             }
  35.         ]]>
  36.     </mx:Script>
  37.  
  38.     <mx:ArrayCollection id="arrColl"
  39.             collectionChange="arrColl_collectionChange(event);" />
  40.  
  41.     <mx:DataGrid id="dataGrid"
  42.             dataProvider="{arrColl}"
  43.             verticalScrollPolicy="on"
  44.             width="200"
  45.             rowCount="8">
  46.         <mx:columns>
  47.             <mx:DataGridColumn dataField="id" width="50" />
  48.             <mx:DataGridColumn dataField="time" />
  49.         </mx:columns>
  50.     </mx:DataGrid>
  51.  
  52. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: DataGrid | No Comments » | 2,392 views Tags: , , , , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll