2 Replies Latest reply on Mar 7, 2012 1:56 PM by iamcootis

    How to make sure the scroller keeps the cursor in view

    iamcootis Level 1

      We have a design that looks something like this:

       

      <s:VGroup>

           <s:Scroller>

                <d:Drawer>

                     <mx:AdvancedDataGrid/>

                </d:Drawer>

                <d:Drawer>

                     <mx:AdvancedDataGrid/>

                </d:Drawer>

                <d:Drawer>

                     <mx:AdvancedDataGrid/>

                </d:Drawer>

           </s:Scroller>

      </s:VGroup>

       

      a drawer is just a glorified accordion.

      The verticalScrollPolicy for each advancedDataGrid = off

       

      As we tab between drawers, we can call this function here to make the scroller move to the correct drawer.

       

      <fx:Declarations>

              <s:Animate id="anim" duration="200">

                  <s:motionPaths>

                      <s:SimpleMotionPath id="pth" property="verticalScrollPosition" />

                  </s:motionPaths>

              </s:Animate>

          </fx:Declarations>

       

      private function scrollToCurrentDrawer(d:NNDrawer):void {

                      if(d){

                          var idx:int = drawerList.getItemIndex(d);

                          var lay:VerticalLayout = _nnViewPort.layout as VerticalLayout;

                          if(lay.fractionOfElementInView(idx) < 1){

                              pth.valueBy = lay.getScrollPositionDeltaToElement(idx).y;

                              anim.play([lay]);

                          }

                      }               

                  }

       

       

      So as the advancedDataGrids grow, they can take up the whole screen. As the user tabs through the AdvancedDataGrid, our cursor may end up going below the current view and the user would have to manually use the scroll bar to see his position. Given this, how can I let the scroller know the current position of the cursor and then be able to scroll to that position?

       

      Thanks!

        • 1. Re: How to make sure the scroller keeps the cursor in view
          Carol L. Frampton Level 2

          I can answer 1/2 your question.

           

          If you wrap a group around the stuff in your scroller, you can set the verticalScrollPosition of the group (which implements IViewport) to scroll.

          • 2. Re: How to make sure the scroller keeps the cursor in view
            iamcootis Level 1

            Oops. It looks like I wrote that out wrong. It looks like this.

             

            <s:Group>

                 <s:Scroller>

                      <sVGroup>

                           <d:Drawer>

                                <mx:AdvancedDataGrid/>

                           </d:Drawer>

                           <d:Drawer>

                                <mx:AdvancedDataGrid/>

                           </d:Drawer>

                           <d:Drawer>

                                <mx:AdvancedDataGrid/>

                           </d:Drawer>

                      <s:VGroup>

                 </s:Scroller>

            </s:Group>

             

            And the scrolling between drawers works fine, but once the advancedDataGrid becomes larger than the viewPort is when there are problems.