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

[oilid]

Yeah, I know this stackoverflow link. But this workaround works only for 4.0.7 for the RowModel selection. In 4.1.1 the RowModel selection bug is already fixed BUT not the one of the CellModel selection... I think a workaround for 4.1.1 is hopeless, isn't it?! :-(

[msec]

I still faced this problem in IE8/ExtJS 4.1.1 with a TreeGrid and found some workaround:

Ext.override(Ext.dom.Element, {
    focus: function(defer, dom) {
        var me = this;
        var scrollTop = undefined;
        var body;
        
        dom = dom || me.dom;
        body = (dom.ownerDocument || DOC).body || DOC.body;
        try {
            if (Number(defer)) {
                Ext.defer(me.focus, defer, me, [ null, dom ]);
            } else {
                if (dom.offsetHeight > Element.getViewHeight()) {
                    scrollTop = body.scrollTop;
                }
                dom.focus();
                if (scrollTop !== undefined) {
                    body.scrollTop = scrollTop;
                }
            }
        } catch (e) {
        }
        return me; 
    }
});

Code of function above was just copied from Ext.dom.Element.focus opened in Firebug. I don't know, why this solution works, but it does. I guess, there's some override in ExtJS core for IE, that causes the bug.

I tried something like

Ext.override(Ext.dom.Element, { focus: Ext.dom.Element.prototype.focus }

but it's still scrolling.

[borg]

Do not bother upgrading to 4.1.3 in hopes of having this bug fixed for cell model because I just did and it isn't fixed.

[Romick]

Hi I found a solution for myself and I want to share it with you.
@msec
You code actualy almost work, but... it has an exception on Element.getViewHeight(), thats why line dom.focus() not called. But this line is actually do that scroll jumping in IE.And input field can't get focus.
So my solution is:

Ext.override(Ext.dom.Element, {
    focus: function(defer, dom) {
        var me = this,
          scrollTop = undefined,
          body;
        
        dom = dom || me.dom;
        body = (dom.ownerDocument || DOC).body || DOC.body;
        try {
          if (Number(defer)) {
            Ext.defer(me.focus, defer, me, [ null, dom ]);
          } else {
            if (dom.offsetHeight > Ext.dom.Element.getViewHeight()) {
                                        //Change from Element.getViewHeight()
              scrollTop = body.scrollTop;
            }
            if (Ext.isIE){
              if (dom.id.indexOf('inputEl') > -1){
                //this focus is called also for view, and then scroll begins but we need to focus only in particular cell (some input field).
                dom.focus();
              }
            } else {
              dom.focus();
            }
            if (scrollTop !== undefined) {
              body.scrollTop = scrollTop;
            }
          }
        } catch (e) {}
        return me; 
    }
}); 

It not fully tested so I'll wait for you feedback.

[borg]

I tested in IE9 and it works! Thank you sir

[whygodwhy]

So yes, technically this fixes the original bug. However, now I'm seeing the opposite effect. When I click the cell it doesn't scroll like it used to but when I click outside the cell the page scrolls back to the top.

I tried adding a 'blur' property with the same function as the 'focus' but that didn't help.

[chrisroch]

I found this fix which worked in my situation.

I overrided the onSelectChange function of the selection model i was using for my grid to set the suspendedLayout property of the grid to true. This prevents the grid from refreshing itself when an item is selected. I am still testing it out so I am not certain if there are any side effects to it as yet. Please provide your feedback.

Ext.define('My.selection.CheckboxModel', {
    extend: 'Ext.selection.CheckboxModel',
    
    showHeaderCheckbox: false, 
    mode: 'SIMPLE',
    preventFocus: true,
    
    listeners: {
        selectionchange: function(sel, records){
            ////Do something......
        }
    },


    /**
     * Fix to prevent grid from scrolling to top when a record is selected
     **/
    onSelectChange: function(record, isSelected, suppressEvent, commitFn) {
        grid = Ext.ComponentQuery.query('#grid-item-id')[0];
        grid.suspendLayout = true;
        
        this.callParent(arguments);
    }
});

[borg]

I submitted a bug and it seems to be fixed in 4.2 (PS before the fix, I noticed if you specify a height: for the grid you could avoid the issue)

[borg]

Apparently there's another similar issue http://www.sencha.com/forum/showthre...47737&posted=1

[rco8786]

nm