Don't scroll grid row into view on focus

0
votes

I have a grid with really high rows like this: https://fiddle.sencha.com/#view/editor&fiddle/2581

By default, when a grid row is clicked, the row scrolls into view. For some reason, I don't want that. It should be selected/focused, but not scrolled into view if it is already partly visible.

Take my example, and scroll such that the border between the first and the second is in the middle of the screen. Click either row, and it will be scrolled into view, and the values I have to see from the other row are no longer visible.

How can I prevent that automatism?

3
extjs

3 Answers

2
votes

To stop scrolling you can give navigationModel as empty object in viewConfig of grid.

viewConfig: {
    navigationModel: {}
}

But, it will also stop scrolling of grid using arrow keys.

0
votes

So, as ankit chaudhary tells us, one needs to remove the navigationModel. I thought a navigationModel could be useful and decided to override the navigationModel to adapt it to my requirement:

Ext.define('MyApp.override.NavigationModel', {
    override : 'Ext.grid.NavigationModel',

    scrollOnFocus: true,

    constructor: function(config) {
        this.callParent(arguments);
        if(Ext.isBoolean(config.scrollOnFocus)) this.scrollOnFocus = config.scrollOnFocus;
    },
    onCellMouseDown: function(view, cell, cellIndex, record, row, recordIndex, mousedownEvent) {
        var actionableEl = mousedownEvent.getTarget(this.isFocusableEl, cell);
        if (!this.scrollOnFocus && !view.actionableMode && mousedownEvent.pointerType !== 'touch' && mousedownEvent.position.column.cellFocusable !== false && !actionableEl) return;
        this.callParent(arguments);
    },

    onItemMouseDown: function(view, record, item, index, mousedownEvent) {
        var me = this,
            scroller;

        if (!mousedownEvent.position.cellElement && (mousedownEvent.pointerType !== 'touch')) {
            if (!view.enableTextSelection) {
                mousedownEvent.preventDefault();
            }

            me.attachClosestCell(mousedownEvent);

            if (me.scrollOnFocus && !me.position.isEqual(mousedownEvent.position)) {
                me.setPosition(mousedownEvent.position, null, mousedownEvent);
            }

            scroller = view.getScrollable();

            if (scroller) {
                scroller.restoreState();
            }
        }
    }
});

Now I can add to my grid's viewConfig a customized navigationModel:

viewConfig: {
    navigationModel:{
        type:'grid',
        scrollOnFocus: false
    }
}

and the grid does no longer scroll on a mouse click.

-1
votes

For focusing set focusRow wheerever you want

grid.view.focusRow(grid.store.getAt(0));