PDA

View Full Version : [4.0.7] scrollTo() scrolls but doesn't move scroll bar slider?



charris
24 Jan 2012, 3:00 PM
I have a tree panel and am trying to do an animated scroll to certain locations. I'm using myTreePanel.getView().getEl().scrollTo('top', yCoord, true) to do this.

The view does scroll down to the correct location, but the "slider" in the scroll bar doesn't move. Any ideas why?

Some additional info: if I use .scroll('down', yDiff) the scrollbar slider moves correctly. I'd prefer to use .scrollTo() so that the scroll is animated, however.

Thanks for any help/advice!

friend
25 Jan 2012, 5:23 AM
Try this:



myTreePanel.getVerticalScroller().scrollToTop();

charris
27 Jan 2012, 8:55 AM
In case anyone else comes across this in the future, note that the issue seems to be that ExtJS 4.0.x uses custom scrollbars--something that's been discontinued in 4.1 (i.e., 4.1 uses native scroll bars).

Someone shared a way to disable the custom scrollbars in a tree/grid here (http://stackoverflow.com/questions/6745395/scrollbar-in-extjs-tree-panel-does-not-work/8036611#8036611). In a nutshell, you do this:

var tree = Ext.create('Ext.tree.Panel', {
scroll : false,
viewConfig : {
style : { overflow: 'auto', overflowX: 'hidden' }
},
// ...
});

// Now this works as expected (scrollbar stays in sync with scroll)
tree.getView().getEl().scrollTo('top', yCoord, true /*animate*/);

The only drawback is that it seems to break the scrolling needed when the up/down arrow keys are used to move through the tree/grid. I shared a work-around for that here (http://stackoverflow.com/questions/9010108/extjs-4-0-7-scrollto-scrolls-but-doesnt-move-scroll-bar-slider/9036920#9036920), which looks like 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 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.