Animated scroll Ext JS grid row into view

I've been using Ext JS at work for a week or so now, mainly for the

grids. Everything went well until I wanted to scroll a grid row into

view.

Googling found responses like this one:

http://stackoverflow.com/questions/2633421/extjs-how-do-i-scroll-to-the-bottom-of-a-grid

The problem with focusRow is that the grid just jumps to the new row

with no animation. I also wanted the focused row to be centered in the

grid, but focusRow prefers to put the row at the bottom of the grid.

Happily, there's an easy answer. A little digging through the Ext JS

source and you can hack up an animated scroll to bring a grid row to

the center of the grid as:

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);
}

And then you can just call gridRevealRow(grid, rowindex) to scroll

a grid row into view.