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?

Barrows

possible duplicate of How to prevent extjs grid from scrolling when clicking on a cell? – Lenten

Answer 1

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

Cushitic

Thank you! I was having the same problem as OP, but in Internet Explorer 8. Using your CSS on the parent container solved the problem, but only when I also switched my code to use the select event of the grid; I had been using the itemclick event before, which still had the same bad behavior even with the CSS. This is with ExtJS 4.0.7, by the way. – Squat

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).

Condemnation