In IE7 the first click on a grid causes an ExtJS Ext.grid.GridPanel to jump to the top of the page

Question

I have a strange issue with an Array fed ExtJS gridPanel - in IE7 only, before the rowclick event is fired, when I click on a row, the page scrolls up 2-3 rows. On repeated clicks, the page scrolls up until the page is at the top of the page. Then only the rowclicks are passed through to my handler. I only have two listeners registered on this grid:

 
        listeners: {
            rowclick:function(grid, rowIndex, e) {
             ... my handler
            },
            sortchange : function(grid, rowIndex, e){}

Do you have any ideas?

Answer 1

I experienced similar bug in Internet Explorer 7. For me zoom:1; position:relative; on surrounding container helped to force layout property.

Answer 2

Try out this patch

Ext.override(Ext.selection.RowModel, {
    onRowMouseDown: function(view, record, item, index, e) {
        //IE fix: set focus to the first DIV in selected row
        Ext.get(item).down('div').focus();

        if (!this.allowRightMouseSelection(e)) {
            return;
        }

        this.selectWithEvent(record, e);
    }
});

Actually, any 'focusable' element can be used (tr and td are not).