Grid column renderer with table element

[potatobob]

I'm having some problems when rendering a grid column with table elements in it. It seems that events don't bubble up the table to the container div where the row select events etc.. are set. Is this a gotcha? Oh and another thing, the row selection arrow keys don't work in safari.

[dj]

I had a quick look in the source of Ext.grid.GridView - the problem is probably not the table but the nesting depth in your DOM tree. It is hard-coded to 6 in Ext.grid.GridView:



...
findRowIndex : function(n){
if(!n){
return false;
}
var r = Ext.fly(n).findParent("tr." + this.rowClass, 6);
return r ? r.rowIndex : false;
}
...



Just increase this value by inserting this code somewhere in your source:


Ext.grid.GridView.prototype.findRowIndex = function(n){
if(!n){
return false;
}
var r = Ext.fly(n).findParent("tr." + this.rowClass, 12 /* or any value that works */);
return r ? r.rowIndex : false;
};

[potatobob]

Ah, I see... thanks

[ram]

This one bit me today as well. I see that 2.0.0 and 2.0.1 increase the value to 10. Really should be configurable.

This would be pretty easy to hoist into a configurable var in the ColumnModel, will you take a patch? I'd rather not have to keep a patch queue and do a custom build.

Thanks,
Rick

[dj]

This one bit me today as well. I see that 2.0.0 and 2.0.1 increase the value to 10. Really should be configurable.

This would be pretty easy to hoist into a configurable var in the ColumnModel, will you take a patch? I'd rather not have to keep a patch queue and do a custom build.

Hi Rick,

you should probably post that to the Feature Request Forum for the Ext-Team to see this.

And until they integrated the config option into Ext you can do this without having to patch the actual source files. After all this is JavaScript where everything is a variable waiting to be altered :)

E.g. add this to a source file that you include after loading Ext and before creating your Grid:


Ext.apply(Ext.grid.GridView.prototype, {
maxRowDepth:12,
findRowIndex: function(n){
if(!n){
return false;
}
var r = Ext.fly(n).findParent("tr." + this.rowClass, this.maxRowDepth);
return r ? r.rowIndex : false;
}
});


Then you can create your (Ext 2) GridPanel with with this newly created config option:


var mypanel = new Ext.grid.GridPanel({
...
viewConfig: {
maxRowDepth:12
}
});


PS: I don't think that the ColumnModel would be a good place for this config option. It would make the findRowIndex method (which is called very often as I recall) slower by introducing quite some object lookups. (from view to gridpanel to columnmodel).