How to prevent extjs grid from scrolling when clicking on a cell?

Question

I am currently using the grid component with Extjs 4 based on the editable grid example. I would like to have a link associated with each cell so that when I click on a cell it takes me to another page. However, when there is a vertical scroll that is trigered on the page when clicking on the link.

e.g. try reducing the size of http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/cell-editing.html, the first click on the grid scrolls the page so that the grid is on the center and the event is swallowed. You have to click again to have the cellclick event registered. This only happens in IE (I am using version 8). The good news is that this does not happen with other browsers, could this be a bug and is there a way to prevent this first scrolling action from happening?

Thanks

Answer 1

I´ve had the same problem and found a solution on the Sencha discussion board.

Adding this code did work for me:

selModel: Ext.create('Ext.selection.Model', { listeners: {} }),

More information: http://www.sencha.com/forum/showthread.php?133983-How-to-prevent-extjs-grid-from-scrolling-when-clicking-on-a-cell

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);
    }
});

Answer 3

I had this same problem with ExtJS 4.2 today and the earlier solutions were not working for me, using this config on the gridpanel handled the problem fully:

viewConfig: {
    focusRow: Ext.emptyFn
}

For example:

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    viewConfig: {
        focusRow: Ext.emptyFn
    }
    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

Answer 4

this could be similar to this problem: In IE7 the first click on a grid causes an ExtJS Ext.grid.GridPanel to jump to the top of the page try position:relative;zoom:1 on the container around the grid to give it hasLayout