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.