开发者

Scroll to selection in an ExtJS Grid

开发者 https://www.devze.com 2022-12-31 10:27 出处:网络
H开发者_如何学Pythoney, 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

H开发者_如何学Pythoney, 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


This also seems to work:

grid.getView().focusRow(rowIdx);


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.


This also seems to work:

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


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

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


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


This also seems to work

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

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


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.


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

0

精彩评论

暂无评论...
验证码 换一张
取 消