Synchronize ExtJs Grid vertical Scrollbar

Recently I was working on ExtJs project in which there were two grids side by side and requirement was to synchronize scrollbar of both grids. See the picture below.

If user moves vertical scrollbar of left grid right grid scrollbar should be moved automatically and vice versa.

So how to do that? Following is the trick. Suppose left grid object is leftGrid and right grid object is rightGrid variables.


var leftGridScroller = leftGrid.getVerticalScroller();
  leftGridScroller.on({
    'bodyscroll': function (event) {
       var rightGridScroller = rightGrid.getVerticalScroller();
       rightGridScroller.el.dom.scrollTop =  leftGridScroller.el.dom.scrollTop;
     }, scope: this
});

And Same way for right hand side grid.


var rightGridScroller = rightGrid.getVerticalScroller();
  rightGridScroller.on({
    'bodyscroll': function (event) {
       var leftGridScroller = leftGrid.getVerticalScroller();
       leftGridScroller.el.dom.scrollTop = rightGridScroller.el.dom.scrollTop;
     }, scope: this
});


This code will work only when you have scroller visible. Else getVerticalScroller will return undefined. So ypu must check for it if you are not sure about number of records in grid.

Same way one can synchronize horizontal scrollbar using above code. Only thing need to change is, you have to use getHorizontalScroller function instead of getVerticalScroller. For horizontal scroller property is scrollLeft.

Same trick can be applied to ExtJs panel scrollbar. Here you can get object of scrollbar using docekdItems if you are using ExtJs version 4.x.x. Please not that thise example is of ExtJs 4.0.2a.