ExtJS 4.0.7 scrollTo() scrolls but doesn't move scroll bar slider?

Question

I have a tree panel and am trying to do an animated scroll to certain locations. I\'m doing something like this:

myTreePanel.getView().getEl().scrollTo(\'top\',          


        

Answer 1

@MoleculeMan's suggestion of disabling the custom scrollbars (which ExtJS uses in 4.0.x but not in 4.1) does work. After doing this you can call myTreePanel.getView().getEl().scrollTo('top', yCoord, true) and everything works as expected: scrolling is animated and the scrollbar moves. The only problem is that it seems to break the ability for the view to scroll if you use the up/down arrow keys to move through the tree.

It's not very elegant, but the work-around I'm going to use is this:

// Animated scroll of tree view
myTreePanel.getView().getEl().scrollTo('top', yCoord, true);

// Wait 300ms then sync the scroll bar with the tree view
setTimeout(function() {
    myTreePanel.setScrollTop(yCoord);
}, 300);

This has the cosmetic disadvantage of the scroll bar "jumping" into place instead of smoothly moving with the animation, but the benefit of not breaking the up/down key scrolling. Also, because it doesn't involve changing config params or overriding the tree view's style, I'm assuming it will still work once we upgrade to ExtJS 4.1 (i.e., the timer call to setScrollTop() will be unnecessary but shouldn't break anything).

Note that calling setScrollTop() moves the scrollbar, but also causes the view to "jump" to that position. You therefore need to ensure that the timer doesn't fire until after the animation finishes. I'm actually using some custom code to poll every 10ms and see if the destination row is visible, then calling setScrollTop(), instead of using a timer that always waits for some hard-coded amount of time:

var scrollToRowNum = 5;
var scrollToEl = getElementForNode(myTreePanel.getRootNode().childNodes[scrollToRowNum]);
var yCoord = scrollToEl.getOffsetsTo(scrollToEl.parent())[1];

// Animated scroll of tree view
myTreePanel.getView().getEl().scrollTo('top', yCoord, true);

// Check every 10ms to see if animation is done, then sync scrollbar
var timerId = setInterval(function() {
    if( myTreePanel.isTreeElementWithinVisibleArea(scrollToEl) ) {
        clearInterval(timerId);
        myTreePanel.setScrollTop(yCoord);
    }
}, 10);

The isTreeElementWithinVisibleArea() function just checks to see if element's current Y coordinate (absolute) is between the top and bottom of the tree view box.

Answer 2

Not surprising. They use their own scrollbar. The correct code would be:

myTreePanel.verticalScroller.setScrollTop(yCoord);

However, it doesn't support animation either. So I recommend to get rid of custom scrollbar as I've described here and use your original code.