ExtJs 4.1 - How to synchronize the vertical scroll of two grids?

2
votes

We have two grids in a panel and we need to have their records to scroll together vertically. That is, if user scrolls any one of the grid vertically then other grid scrolls too.

Thus, what can be the way to bind their vertical scrollbars?

A solution for version 4.0.2a is present here but the functions used have been deprecated in 4.1 version and thus it does not work in the newer versions.

Could anyone guide on how to achieve this in ExtJs version 4.1.*?

Thanks for any help in advance.

3
extjsgridscrollscrollbarextjs4.1

3 Answers

8
votes

I don't see anything handy in API, but still it's possible to hook up to html elements:

grid1.view.getEl().on('scroll', function(e, t) {
    grid2.view.getEl().dom.scrollTop = t.scrollTop;
});
grid2.view.getEl().on('scroll', function(e, t) {
    grid1.view.getEl().dom.scrollTop = t.scrollTop;
});

Working sample: http://jsfiddle.net/CSwAH/

1
votes

Lately "Locking grid" has become available. http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/locking-grid.html

Easy to use and is useful too.

My answer comes 2 years later but it's for anyone who's looking for a good solution.

0
votes

This seems an old post but I want to share my part of answer. See, when adding synching scrollbars, problem is the mousewheel scrolling is somewhat slow. See this fiddle.

So, what I've come up with is to add a delay to the event:

grid1.view.getEl().on('scroll', function(e, t) {
    grid2.view.getEl().dom.scrollTop = t.scrollTop;
}, grid1.view.getEl(), {delay: 50});
grid2.view.getEl().on('scroll', function(e, t) {
    grid1.view.getEl().dom.scrollTop = t.scrollTop;
},grid2.view.getEl(),{delay: 50}); //50 seems fine for me. adjust if you must