1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    48
    Vote Rating
    1
    dcoan604 is on a distinguished road

      0  

    Default Unanswered: How to scroll to a record in grid panel in extjs 4??

    Unanswered: How to scroll to a record in grid panel in extjs 4??


    Preferably animated
    Preferably center the row in the grid ie not at bottom or top after scrolling.

    I found this: http://retcron.blogspot.com/2010/09/...-row-into.html

    Code:
    function smoothScrollIntoView(element, container) {
      var c = Ext.getDom(container) || Ext.getBody().dom,
         el = element.dom,
         o = element.getOffsetsTo(c),
         t = o[1] + c.scrollTop,
         ch = c.clientHeight;
      var newCTop = t - ch / 2;
      if (newCTop < 0)
        newCTop = 0;
      container.scrollTo('top', newCTop, true);
    }
    
    function gridRevealRow(grid, rowIndex) {
      var row = new Ext.Element(grid.getView().getRow(rowIndex));
      smoothScrollIntoView(row, grid.getView().scroller);
    }
    But couldn't get it to work.

    Ultimately I would like to make this a mixin or plugin

    Many thanks in advance

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Posts
    48
    Vote Rating
    1
    dcoan604 is on a distinguished road

      0  

    Default Think I might have solved it

    Think I might have solved it


    Code:
    function smoothScrollIntoView(element, container) {
                     var c = Ext.getDom(container) || Ext.getBody().dom,
                        el = element.dom,
                        o = element.getOffsetsTo(c),
                        t = o[1] + c.scrollTop,
                        ch = c.clientHeight;
    
    
                     var newCTop = t - ch / 2;
    
                     if (newCTop < 0)
                       newCTop = 0;
    
                     container.scrollTo('top',newCTop, true); 
    
    }
    
    
    function gridRevealRow(grid, rowIndex) {
    
                 var row = new Ext.Element(grid.getView().getNode(rowIndex));
    
                  smoothScrollIntoView(row, grid.getView().getEl());
    }
    
    
    // useage:--------------------------------------------------------------------
    
    gridRevealRow (myGridPanel, theRecordToScrollTo)
    I'm pretty sure the second argument can be a rowId, recordId or the record itself. I've only tested using the record object itself.
    Please chime in if you see issues with this, or a better way that I have overlooked. Otherwise I will mark my thread answered....and hopefully this will help someone else.

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    48
    Vote Rating
    1
    dcoan604 is on a distinguished road

      0  

    Default


    It does do some weird things to the scroll bar though.
    Although the record scrolls neatly into view... the scrollbar itself doesn't redraw (or animate as the scrolling is happening). wtf? :-)

    I didn't configure a "scroller" for my gridpanel.

    My gridpanel occupies the west region of a border layout, which is nested in the center region of a parent border layout. (if that makes sense).

    I never set "autoScroll=true" for my gridPanel...and yet I clearly have a scrollbar when required. And the scroll bar adjusts if I change my browser height etc.

    When do I need to "manually" add a scroller object?

  4. #4
    Sencha User
    Join Date
    Jul 2011
    Posts
    48
    Vote Rating
    1
    dcoan604 is on a distinguished road

      0  

    Default


    Anyone have tips?