focus and scroll to a certain record in a grid

[tianhao]

hi all,i have the following code to focus and scroll to a certain record in a grid:

Ext.onReady(function(){
var mainPanel = Ext.create('Ext.grid.Panel', {......});
});
mainPanel.render(document.body);
var rowindex = 66;
mainPanel.getSelectionModel().select(rowindex);
mainPanel.getView().focusRow(rowindex);

this can focus the record in the grid but cannot scroll to the record.but if i create a button with the last three line code,it works when i click the button.

Ext.onReady(function(){
var mainPanel = Ext.create('Ext.grid.Panel', {......
buttons: [{text: 'FocusScroll',
handler: function() {
var rowindex = 66;
mainPanel.getSelectionModel().select(rowindex);
mainPanel.getView().focusRow(rowindex);
}
}]
});
});
mainPanel.render(document.body);

how can i focus and scroll after the grid render without the button?
thank you very much.

[tianhao]

this can solve my problem:


Ext.onReady(function(){
var mainPanel = Ext.create('Ext.grid.Panel', {......});
});
mainPanel.render(document.body);
setTimeout(function(){
var rowindex = 66;
mainPanel.getSelectionModel().select(rowindex);
mainPanel.getView().focusRow(rowindex);
}, 500
);

[ashu2289]

@tianhao: Delay definitely solves the problem, but this is something you cant rely on. I am also facing similar issue. Did you get any event which ensures that now you can perform scrolling or focus on a row.

[tianhao]

yes, delay solves the problem.
but i have no idea except this one.
i also have not catched any event about scrolling.
still waiting for the best solution.

[ashu2289]

In my case, this solves the problem. I have used the afterrender event of the scrollbar. Below are the grid listeners:


afterrender: function(grid){
var view = grid.getView();
if(view && recordId){
view.on('refresh', function(grid){
var rowIndex = grid.getStore().indexOfId(recordId);
if(rowIndex!=-1){
grid.getSelectionModel().select(rowIndex);
view.focusRow(recordId);
}
}, this);
}
},
scrollershow: function(scroller, orientation, opts){
scroller.on('afterrender', function(){
var grid = Ext.getCmp('resultGrid');
var view = grid.getView();
if(view && recordId){
var rowIndex = grid.getStore().indexOfId(recordId);
if(rowIndex!=-1){
view.focusRow(view.getRecord(view.getNode(rowIndex)));
}
}
}, this);
},

[yyogev]

I found that even after waiting for the grid to be rendered, focusRow() would show the record, and then later a page redraw occured due to more items (e.g. other grids) that were added beside this grid caused this grid to scroll back to the top.

I have solved it in a crude way by keeping count of how many grids and panels that need to be rendered I have in my page, and each would decrease the counter in afterrender so when all was really ready I would issue the focusRow() call.

[tianhao]

thanks to ashu2289, i will try the code in my page.
also thanks to yyogev for your remind. delay focus did it because i loaded data to the grid with ajax.