[FIXED-1114] LockingGridView wrong header height on WebKit

[Condor]

On WebKit browsers (tested Safari 5.0.7533.16 and Chrome 5.0.375.99) the heights of the headers of the locked and unlocked section are not synced correctly.

Try the following example on a WebKit browser (Safari or Chrome):

Ext.onReady(function () {
new Ext.Viewport({
layout: 'fit',
items: {
xtype: 'grid',
store: [[1, 'One'], [2, 'Two'], [3, 'Three']],
colModel: new Ext.ux.grid.LockingColumnModel([
{header: 'Number', dataIndex: 'field1', locked: true},
{header: 'Text²', dataIndex: 'field2'}
]),
view: new Ext.ux.grid.LockingGridView()
}
});
});

I have no idea why WebKit displays with the wrong height, but I was able to work around the problem by changing the height of the <tr> element instead of the <table>.

Suggested fix:

Ext.override(Ext.ux.grid.LockingGridView, {
syncHeaderHeight: function(){
var hrow = this.innerHd.firstChild.firstChild.firstChild.firstChild,
lhrow = this.lockedInnerHd.firstChild.firstChild.firstChild.firstChild;
hrow.style.height = 'auto';
lhrow.style.height = 'auto';
var hd = hrow.offsetHeight,
lhd = lhrow.offsetHeight,
height = (lhd > hd ? lhd : hd) + 'px';
hrow.style.height = height;
lhrow.style.height = height;
}
});

[Jamie Avins]

Can you give us a test case Condor, and we really need to get a better selector than that.

[Condor]

That example above was the testcase. Didn't it work for you?

I agree that that firstChild nesting is ugly. You could replace it with:

var hrow = Ext.fly(this.innerHd).child('tr', true),
lhrow = Ext.fly(this.lockedInnerHd).child('tr', true);

[Jamie Avins]

So much better, and now much less worry about a change to the structure breaking the selector.

Sorry, I missed the testcase that was right in front of me.

[evant]

Thanks for the report, it's been updated in SVN.