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

Answer 5

This also seems to work

grid.getView().getNode(rowIndex).scrollIntoViewIfNeeded();

In case of ExtJs 4.X No need to use Ext.fly

Answer 6

Sorry, I'm being really dumb. I just tried ensureVisible and it works fine.

Answer 7

To save you all a lot of hair pulling, you should know that the solutions in this thread for scrolling into view will not work if grid bufferedRenderer is turned on.

It is my understanding that in Ext JS 5, bufferedRenderer is turned on by default.

It took me a couple hours before I realized this.

grid.getView().getNode(rowIndex) will return NULL if the indexed row is outside the buffered rows.

Answer 8

In 4.2 at least, using scrollIntoViewIfNeeded fails if you're outside of the buffered range in a bufferedRenderer. The bufferedRenderer has a handy scrollTo method to help with this task though:

grid.getView().bufferedRenderer.scrollTo(index, true);

Scrolls to and optionlly selects the specified row index in the total dataset.

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.grid.plugin.BufferedRenderer-method-scrollTo