PDA

View Full Version : How to scroll to a grid row after load



robtcallahan
3 Feb 2010, 8:10 AM
Hi,

After a grid is loaded I want to select and scroll to a specific row. The row is being selected and focused, but it is not being scrolled to.

I've spent a couple of hours on this already reading docs, searching forums and google and I just can't figure it out.

Here's a code snippet:


this.devicesStore.on("load", function() {
// if a hostname was entered, select that hostname and scroll down to it
if (this.enteredHostName != null)
{
var items = this.devicesStore.data.items;
for (var i=0; i<items.length; i++)
{
if (items[i].data.hostName == this.enteredHostName) {
// the following line works; the row is selected
this.selectionModel.selectRow(i, true);
// according to docs, this is suppose to scroll to this row, but it does not
this.gridPanel.getView().focusRow(i);
}
}
this.enteredHostName = null;
}
}.createDelegate(this));


What am I doing wrong?

Thanks,
Rob

Animal
3 Feb 2010, 8:38 AM
viewready event

2nd time today

TigersWay
3 Feb 2010, 9:05 AM
Yes, try another browser, just in case. I started another thread with the same trouble on FF, while it's working fine on Chrome.
Focused, selected but not scrolled to!!

robtcallahan
3 Feb 2010, 9:14 AM
viewready event

2nd time today

Ok, so I changed my code to listen on a viewready event on the grid, but it never seems to fire:


this.gridPanel = new Ext.grid.GridPanel({
collapsible: false,
region:'center',
margins: '0 0 0 0',
loadMask: {msg:"Obtaining hostnames from the router..."},
store: this.devicesStore,
cm: this.colModel,
sm: this.selectionModel,
autoScroll: true,
viewConfig: {
forceFit: true
},
tbar: this.toolbar
});
this.gridPanel.on("viewready", function(grid) {
// if a hostname was entered, select that hostname and scroll down to it
if (this.enteredHostName != null)
{
var items = this.devicesStore.data.items;
for (var i=0; i<items.length; i++)
{
if (items[i].data.hostName == this.enteredHostName) {
this.selectionModel.selectRow(i, true);
this.gridPanel.getView().focusRow(i);
}
}
this.enteredHostName = null;
}
}.createDelegate(this));


I used Firebug to see that the event is in fact registered. So why is it not fired?

Rob

robtcallahan
3 Feb 2010, 11:28 AM
The "viewready" event is only fired when the grid is rendered. Therefore, it is not useful when you are loading the grid subsequent to this. What I don't understand is why the
grid.getView().focusRow(i) doesn't work in the "load" event. The row is selected and focused but is not scrolled to. Should it be? If not, is there a way to scroll to a row in a grid?

Rob

robtcallahan
3 Feb 2010, 12:27 PM
Ok, FWIW, I found a way around the issue.
As it turns out the following can be found in the definition of Ext.grid.GridView():


onLoad : function(){
this.scrollToTop.defer(Ext.isGecko ? 1 : 0, this);
}


So the the setFocus actually worked and scrolled appropriately, but the function above caused a scroll back to the top. A bit frustrating.

So I just redefined the method:


Ext.grid.GridView.prototype.onLoad = function() {}


Problem solved.
I'd like to know why it was decided to scroll to the top if Ext.isGecko is true.

Rob