2013/10/14

Flex: Spark List コンポーネントで特定のアイテムにスクロールさせる方法

Flex: Spark List コンポーネントでスクロールして特定のアイテムを表示領域に表示させる方法を紹介します。

方法は簡単で、「ensureIndexIsVisible」メソッドを使います。引数に表示させたいアイテムのインデックスを設定するだけです。このメソッドを実行すると引数に設定したアイテムが表示される位置までスクロールします。

※現在位置が指定したインデックスより上の場合、指定したインデックスのアイテムはリストの一番下に表示されます。
※現在位置が指定したインデックスより下の場合、指定したインデックスのアイテムはリストの一番上に表示されます。

■結果
■ソースコード
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160">
 
 <fx:Script>
  <![CDATA[
   protected function btnJumpFirst_clickHandler(event:MouseEvent):void
   {
    trace("btnJumpFirst_clickHandler");
    list.ensureIndexIsVisible(0);
   }
   protected function btnJump15_clickHandler(event:MouseEvent):void
   {
    trace("btnJump15_clickHandler");
    list.ensureIndexIsVisible(14);
   }
   protected function btnJumpLast_clickHandler(event:MouseEvent):void
   {
    trace("btnJumpLast_clickHandler");
    //list.layout.verticalScrollPosition = 100;
    list.ensureIndexIsVisible(29);
   } 
  ]]>
 </fx:Script>
 <s:VGroup width="100%" height="100%"
     gap="0">

  <s:HGroup>
   <s:Button id="btnJumpFirst" 
       width="100" height="50"
       label="First"
       click="btnJumpFirst_clickHandler(event)"/>
   <s:Button id="btnJump15" 
       width="100" height="50"
       label="15"
       click="btnJump15_clickHandler(event)"/>
   <s:Button id="btnJumpLast"
       width="100" height="50"
       label="Last"
       click="btnJumpLast_clickHandler(event)"/>
  </s:HGroup>
  
  <s:List id="list" 
    width="100%" height="100%">
   <s:dataProvider>
    <s:ArrayList>
     <fx:String>テストアイテム1</fx:String>
     <fx:String>テストアイテム2</fx:String>
     <fx:String>テストアイテム3</fx:String>
     <fx:String>テストアイテム4</fx:String>
     <fx:String>テストアイテム5</fx:String>
     <fx:String>テストアイテム6</fx:String>
     <fx:String>テストアイテム7</fx:String>
     <fx:String>テストアイテム8</fx:String>
     <fx:String>テストアイテム9</fx:String>
     <fx:String>テストアイテム10</fx:String>
     <fx:String>テストアイテム11</fx:String>
     <fx:String>テストアイテム12</fx:String>
     <fx:String>テストアイテム13</fx:String>
     <fx:String>テストアイテム14</fx:String>
     <fx:String>テストアイテム15</fx:String>
     <fx:String>テストアイテム16</fx:String>
     <fx:String>テストアイテム17</fx:String>
     <fx:String>テストアイテム18</fx:String>
     <fx:String>テストアイテム19</fx:String>
     <fx:String>テストアイテム20</fx:String>
     <fx:String>テストアイテム21</fx:String>
     <fx:String>テストアイテム22</fx:String>
     <fx:String>テストアイテム23</fx:String>
     <fx:String>テストアイテム24</fx:String>
     <fx:String>テストアイテム25</fx:String>
     <fx:String>テストアイテム26</fx:String>
     <fx:String>テストアイテム27</fx:String>
     <fx:String>テストアイテム28</fx:String>
     <fx:String>テストアイテム29</fx:String>
     <fx:String>テストアイテム30</fx:String>
    </s:ArrayList>
   </s:dataProvider>
   <s:itemRenderer>
    <fx:Component>
     <s:LabelItemRenderer label="{data}"/>
    </fx:Component>
   </s:itemRenderer>
  </s:List>
 </s:VGroup>
</s:Application>


http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/List.html#ensureIndexIsVisible()
http://blog.flexexamples.com/2010/05/12/scrolling-to-a-specific-index-in-a-spark-list-control-in-flex-4/
http://blog.flexexamples.com/2009/05/30/setting-the-vertical-scroll-position-on-a-spark-list-control-in-flex-4/
Labels: , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)