0 Replies Latest reply on Jun 30, 2011 11:27 PM by newbie_dev

    Flex Grid :: vertical scroll using track vs up/down button :: grid item global position inconsistent

    newbie_dev Level 1

      Hi,

       

      I am using flex 4.1. I have a grid whose verticalScrollPolicy is "on" and verticalLineScrollSize="100" and the height of all grid items (buttons) is 100.

       

      I am tracking the global position of one of the button upon scroll (overriding set verticalScrollPosition of the grid, dispatch event).

      The issue is this position is different when I scroll the same number of pixels using the track and I scroll using the down arrow of the scroll bar.

       

      Following are the images which depict this behaviour ::

      Initial gobal position of second row's buttonGlobal position of the second row's button - scroll using trackGlobal position of second row's button - scroll using down button
      grid_scroll_globalPosition_initial.JPGgrid_scroll_globalPosition_scrollTrack.JPGgrid_scroll_globalPosition_scrollButton.JPG

       

       

      Following is the code for the same

      APPLICATION ::
      
      <?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" 
                        xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:dummy="dummy.*"
                        initialize="initApp()">
           
                <s:Label id="label1" x="10" y="10" text="feedback"/>
           
           <dummy:Grid_moveScroll id="grid" x="10" y="50" />
           
           
           <fx:Script>
                <![CDATA[
                     import dummy.Grid_moveScrollEvent;
                     private function initApp():void{
                          this.addEventListener(Grid_moveScrollEvent.GRID_MOVE,gridMoveHandler);                    
                     }
                     
                     private function gridMoveHandler(event : Grid_moveScrollEvent):void{
                          this.label1.text = "Second row button global position : " + event.position.x.toString() + ", " +     event.position.y.toString();
                     }
                
                ]]>
           </fx:Script>
      </s:Application>
      
       
      CUSTOM GRID ::
      <?xml version="1.0" encoding="utf-8"?>
      <mx:Grid xmlns:fx="http://ns.adobe.com/mxml/2009" 
                 xmlns:s="library://ns.adobe.com/flex/spark" 
                 xmlns:mx="library://ns.adobe.com/flex/mx"     height="300" width="100"
                 x="100" y="10"
                 verticalScrollPolicy="on"
                 verticalLineScrollSize="100">
           <mx:GridRow height="100">
                <mx:GridItem>
                     <s:Button 
                          height="100" width="100%" 
                          label="first row"/>
                </mx:GridItem>
           </mx:GridRow>
           <mx:GridRow height="100">
                <mx:GridItem>               
                     <s:Button 
                          id="secBut"                    
                          height="100" width="100%" 
                          label="second row"/>          
                </mx:GridItem>
           </mx:GridRow>
           <mx:GridRow height="100">
                <mx:GridItem>
                     <s:Button 
                          height="100" width="100%" 
                          label="third row"/>
                </mx:GridItem>
           </mx:GridRow>
           <mx:GridRow height="100">
                <mx:GridItem>
                     <s:Button 
                          height="100" width="100%" 
                          label="fourth row"/>
                </mx:GridItem>
           </mx:GridRow>
           <mx:GridRow height="100">
                <mx:GridItem>
                     <s:Button 
                          height="100" width="100%" 
                          label="fifth row"/>
                </mx:GridItem>
           </mx:GridRow>
           <fx:Script>
                <![CDATA[
                     override public function set verticalScrollPosition(value:Number):void{
                          super.verticalScrollPosition = value;
                          var secButGlobalPos : Point = this.secBut.localToGlobal(new Point(this.secBut.x, this.secBut.y));
                          dispatchEvent(new Grid_moveScrollEvent(Grid_moveScrollEvent.GRID_MOVE,secButGlobalPos));
                     }
                     
                ]]>
           </fx:Script>
      </mx:Grid>
      
       
      EVENT DISPATCHED :: 
      package dummy
      {
           import flash.events.Event;
           import flash.geom.Point;
           
           public class Grid_moveScrollEvent extends Event          
           {
                public static const GRID_MOVE : String = "grid_move";
                          
                public function Grid_moveScrollEvent(type:String, firstButGlobalPosition : Point)
                {
                     super(type,true,false);
                     position = firstButGlobalPosition;
                }
                
                public var position : Point;
           }
      }
      

       

      Could anyone please tell me if there is something I am doing wrong? is there some other constraint to be met while using verticalLineScrollSize?

       

      thanks in advance.