3 Replies Latest reply on Apr 12, 2010 11:44 PM by Shongrunden

    How to get the visible items on a Spark List with virtual layout

    João Saleiro Level 1

      Hello,

       

      I have:

       

      • an ArrayCollection of Numbers;
      • a List using the above ArrayCollection as it's dataprovider, and virtualLayout=true;
      • a custom ItemRenderer that shows a label with:

      1. the number
      2. an y position depending on the number AND the highest number visible

       

       

      In another words, if I have 10 numbers in the AC, and only 5 appear on the screen, the y position of those 5 will depend on the value of the maximum number for those 5. When the user scrolls, of course those 5 elements change so the position of the label in item renderers will change.

       

      My questions:

       

      • How can I get the list of items that are "currently" visible?
      • Which event/method to override will help me know that the List was scrolled/the visible items changed?

       

      Thank you,

       

      João Saleiro

        • 1. Re: How to get the visible items on a Spark List with virtual layout
          David_F57 Level 5

          Hi,

           

          I tried to find a test I did a while ago where I used the layout property firstItemInView and LastItemInView, i'll see if I can find the code when I have time, I can't remember at the moment how I got the values out .

           

           

          David.

          • 2. Re: How to get the visible items on a Spark List with virtual layout
            Shongrunden Adobe Employee

            The DataGroup.getItemIndicesInView() might be useful to you:

            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark">

             

                <s:controlBarContent>
                    <s:Button label="increment vsp" click="list1.dataGroup.verticalScrollPosition+=55" />
                    <s:Button label="gets items in view" click="trace(list1.dataGroup.getItemIndicesInView())" />
                </s:controlBarContent>
               
                <s:List id="list1" width="100" height="50">
                    <s:dataProvider>
                        <s:ArrayList>
                            <fx:String>0</fx:String>
                            <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>
                        </s:ArrayList>
                    </s:dataProvider>
                </s:List>
               
            </s:Application>

            • 3. Re: How to get the visible items on a Spark List with virtual layout
              Shongrunden Adobe Employee

              You can tell when the scroll position has changed by handling the propertyChange event coming from the DataGroup:

               

              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                             xmlns:s="library://ns.adobe.com/flex/spark"
                             creationComplete="list1.dataGroup.addEventListener('propertyChange', handle)">

               

                  <fx:Script>
                      <![CDATA[
                          import mx.events.PropertyChangeEvent;
                          private function handle(e:PropertyChangeEvent):void {
                              if (e.property == 'verticalScrollPosition'){
                                  trace('vsp changed');               
                              }
                              if (e.property == 'horizontalScrollPosition'){
                                  trace('hsp changed');               
                              }
                          }
                      ]]>
                  </fx:Script>
                 
                  <s:List id="list1" width="100" height="50">
                      <s:layout>
                          <s:VerticalLayout />
                      </s:layout>
                      <s:dataProvider>
                          <s:ArrayList>
                              <fx:String>0</fx:String>
                              <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>
                          </s:ArrayList>
                      </s:dataProvider>
                  </s:List>
                 
              </s:Application>

               

               

              You might also want to read and consider voting for http://bugs.adobe.com/jira/browse/SDK-21357