Scroll to selection in an ExtJS Grid

问题:

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

回答1:

This also seems to work:

grid.getView().focusRow(rowIdx);

回答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.

回答3:

This also seems to work:

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

回答4:

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

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

回答5:

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

回答6:

This also seems to work

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

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

回答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.

回答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