ExtJS6: How to prevent grid rows from scrolling into focus when clicking

Question

I have a grid with a checkbox selection model and tall cells due to custom html renderers. The problem is when any cell is clicked the grid jerks because the selected cell is scrolled into the focus.

Here is a fiddle with the problem, try scrolling the table manually halfway first and then clicking on the cells to see the grid jumping (it's not consistent, might need to try a few times): https://fiddle.sencha.com/#view/editor&fiddle/1vma

Is there a way to disable row focusing on click, or disable row selection on click if thats the root cause (so you would have to use checkboxes to select rows).

Answer 1

I have found that returning false from the "beforecellmousedown" event listener function prevents the behavior you are trying to avoid.

listeners: {
    beforecellmousedown: function () {
        return false;
    }
}

Here is the fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1vq3

Answer 2

If your grid row contains text that needs to be editable/selectable you can use:

viewConfig: {
    navigationModel: {}
}

Answer 3

Suggested earlier answers work for Modern Toolkit only. For Classic this code helps:

listeners: {
    cellclick: function () {
        this.blur();
    }
}