Scroll to selection in an ExtJS Grid

Question

Hey, i need to be able to scroll my ExtJS grid to the current selection but have no idea how to do this. I came across a reference in a forum to an ensureVisible method but can find no information. Can anyone make any suggestions? Thanks

Answer 1

This also seems to work:

grid.getView().focusRow(rowIdx);

Answer 2

Unfortunately ensureVisible() was removed from ExtJS 4. The most straight-forward solution I found is to use scrollIntoView(). In my case, this was after selecting the row based on a value I loaded.

var rowIndex = store.find('fieldName', value);
grid.getSelectionModel().select(rowIndex);
Ext.fly(grid.getView().getNode(rowIndex)).scrollIntoView();

This will show the selected row at the bottom of the grid. More work would need to be done to have it at the top or middle of the grid.

Answer 3

This also seems to work:

    grid.getView().getRow(rowIdx).scrollIntoView();

Answer 4

Worked for me on ExtJS 6, even with bufferedRenderer turned on.

        var record = grid.getSelectionModel().selected.getRange()[0];
        grid.getView().focusRow(record);