My Fix To Some Scroll Bugs With Locked Columns in a Grid

[mike000]

I searched a little bit, but not extensively for the two bugs I was having with scrolling issues with locked columns in a grid. As far as I can tell these bugs still exist in the latest stable release candidate.

The first bug was the screen would not scroll right with the selected cell if you were navigating using the keyboard. The reason I found for this was that in GridView.ensureVisible, the widths of the visible locked columns were not being taken into account as occupying part of the screen.

The other bug that I encountered was that clicking on a locked column on the left side of the screen would scroll the screen all the way to left. To fix this, I also changed GridView.ensureVisible to not scroll when a locked column was clicked, because it makes no sense for it to do so (locked columns are always visible).

Here's my code. It could be improved in some places, notably by using ColumnModel.getTotalLockedWidth() rather than my custom method (for whatever reason that method was always returning 0 for me).


/*
* A custom version of gridView to fix a scrolling problem that hasn't been remedied yet
*/
framework.customGridView = function(config) {
framework.customGridView.superclass.constructor.ca ll(this, config);
};

Ext.extend(framework.customGridView, Ext.grid.GridView, {

/*
* How much space the locked columsn take up on the screen.
*/
lockedCellWidth : 0,

/*
* A custom version of ensureVisible that also accounts for locked cells taking up room on the left
* of the screen.
*/
ensureVisible : function(row, col, hscroll){
var el = this.getCell(row, col);
if(!el){
return;
}

if (this.grid.colModel.isLocked(col)) { //Don't scroll on a locked column
return el;
}

if(typeof row != "number"){
row = row.rowIndex;
}
if(row < 0 && row >= this.ds.getCount()){
return;
}
col = (col !== undefined ? col : 0);
var cm = this.grid.colModel;
while(cm.isHidden(col)){
col++;
}


var c = this.scroller.dom;

var ctop = parseInt(el.offsetTop, 10);
var cleft = parseInt(el.offsetLeft, 10);
var cbot = ctop + el.offsetHeight;
var cright = cleft + el.offsetWidth; //I guess this is cell right

var ch = c.clientHeight - this.mainHd.dom.offsetHeight;
var stop = parseInt(c.scrollTop, 10);
var sleft = parseInt(c.scrollLeft, 10);
var sbot = stop + ch;
var sright = sleft + c.clientWidth; //I guess this is the right of the screen


if (this.lockedCellWidth == 0) { //set up the lockedCellWidth
//Loop through each of the potential locked cells
var cm = this.grid.colModel;
var cc = cm.getColumnCount(false);
var i;
for (i=0; i<cc; i++) {
if (cm.isLocked(i) == true && cm.isHidden(i) == false ) {
this.lockedCellWidth += cm.getColumnWidth(i);
}
}
if (this.lockedCellWidth == 0) { //No locked columns
this.lockedCellWidth = 9999;
}
}

var lw = this.lockedCellWidth;
var realCliWidth = c.clientWidth - lw;
sright = sleft + realCliWidth;

if(ctop < stop){
c.scrollTop = ctop;
}else if(cbot > sbot){
c.scrollTop = cbot-ch;
}

if(hscroll !== false){
if(cleft < sleft){
c.scrollLeft = cleft;
}else if(cright > sright){
c.scrollLeft = cright-realCliWidth;
}
}

return el;
}
});


Sorry for the tabbing issues.

[jack.slocum]

Thanks Mike, we will do some testing and see how it integrates.