Flex 4中如何检测List上下滚动按钮被按下的例子

By Minidxer | September 19, 2009

接下来的例子演示了Flex 4中如何通过监听VScrollBar上的change事件，检测List上下滚动按钮被按下。

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


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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Spark_List_scroller_verticalScrollBar_change_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns:mx="library://ns.adobe.com/flex/halo">
  6.  
  7.     <fx:Script>
  8.         <![CDATA[
  9.             import spark.components.VScrollBar;
  10.  
  11.             private function init():void {
  12.                 list.scroller.verticalScrollBar.addEventListener(Event.CHANGE, list_verticalScrollBar_change);
  13.             }
  14.  
  15.             private function list_verticalScrollBar_change(evt:Event):void {
  16.                 var vsb:VScrollBar = evt.currentTarget as VScrollBar;
  17.                 var obj:Object = {};
  18.                 obj.type = evt.type;
  19.                 obj.val = vsb.value;
  20.                 obj.max = vsb.maximum;
  21.                 arrColl.addItem(obj);
  22.                 callLater(dgScroll);
  23.             }
  24.  
  25.             private function dgScroll():void {
  26.                 dataGrid.verticalScrollPosition = dataGrid.maxVerticalScrollPosition;
  27.             }
  28.         ]]>
  29.     </fx:Script>
  30.  
  31.     <fx:Declarations>
  32.         <mx:ArrayCollection id="arrColl" />
  33.     </fx:Declarations>
  34.  
  35.     <s:HGroup horizontalCenter="0" verticalCenter="0">
  36.         <s:List id="list"
  37.                 creationComplete="init();">
  38.             <s:layout>
  39.                 <s:VerticalLayout requestedRowCount="4" />
  40.             </s:layout>
  41.             <s:dataProvider>
  42.                 <s:ArrayList>
  43.                     <fx:String>The</fx:String>
  44.                     <fx:String>Quick</fx:String>
  45.                     <fx:String>Brown</fx:String>
  46.                     <fx:String>Fox</fx:String>
  47.                     <fx:String>Jumps</fx:String>
  48.                     <fx:String>Over</fx:String>
  49.                     <fx:String>The</fx:String>
  50.                     <fx:String>Lazy</fx:String>
  51.                     <fx:String>Dog</fx:String>
  52.                 </s:ArrayList>
  53.             </s:dataProvider>
  54.         </s:List>
  55.         <mx:DataGrid id="dataGrid"
  56.                 dataProvider="{arrColl}"
  57.                 width="200"
  58.                 verticalScrollPolicy="on">
  59.             <mx:columns>
  60.                 <mx:DataGridColumn dataField="type" />
  61.                 <mx:DataGridColumn dataField="val" />
  62.                 <mx:DataGridColumn dataField="max" />
  63.             </mx:columns>
  64.         </mx:DataGrid>
  65.     </s:HGroup>
  66.  
  67. </s:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Gumbo, List | No Comments » | Tags: , , ,

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll