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

Hangchow

I got the same problem in Chrome 12 and ExtJS 4.0.2. It only happens when the grid is higher than the page. – Outsider

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

Sclerotic

I notice with Ext 4.1.1 this will work for preventing the scroll in WebKit-based browsers but not IE. – Jinny

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

Hobnob

this works for me: not work> #3784514 >not work: sencha.com/forum/… – Obscurantism

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

Mambo

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

Teage

unfortunatly applying the same fix than in version 3 of Extjs doe snot work in 4. – Hangchow