How to restore grid focus after data reload in ExtJS?

Question

I have a view in ExtJS that contains a grid where the user can select an entry plus some panel with details about the currently selected row. Each time another row is selected the view is reloaded, which causes the grid to loose input focus for keyboard navigation.

How can I reload grid store data and keep input focus on the grid? My model defines idProperty and thus the correct row gets selected, but column selection and input focus gets lost. I am using ExtJS v7.3.0.55 with the Classic Triton theme.

Example

Extend the code in the existing Grid with JSON Store Sencha Fiddle with a data model and some grid event listener to reproduce the issue:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        // My data model with custom ID field
        Ext.define('User', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'name',  type: 'string'},
                {name: 'email', type: 'string'},
                {name: 'phone', type: 'string'},
            ],
            idProperty: 'email',
        });

        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            model: 'User',

            proxy: {
                type: 'ajax',
                // Loading data from ./simpsons.json in the fiddle ./Data folder.
                url: 'simpsons.json',

                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            }
        });

        Ext.create('Ext.grid.Panel', {
            renderTo: Ext.getBody(),
            height: 300,
            width: "100%",
            title: 'Simpsons',

            store: 'simpsonsStore',
            autoLoad: true,

            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }],

            // Add some event handler to reload grid data, restore selected row
            listeners: {
                select: function (sender) {
                    console.log('grid selection update');
                    var record = sender.getSelected();
                    var store = sender.getStore();
                    store.load();
                    // This will restore the selected row, but grid focus is lost
                    sender.setSelected(record);
                }   
            }
        });
    }
});

Arthur Rubens Arthur Rubens · Accepted Answer · 2020-11-27T10:08:47

Try to put the selection in the store`s load handler:

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    height: 300,
    width: "100%",
    title: 'Simpsons',

    // Using Named Store
    store: 'simpsonsStore',

    // Load the data
    autoLoad: true,

    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone'
    }],
    listeners: {
        select: function (selectionRowModel, selectedRecord, selectedIndex) {
            var store = selectionRowModel.getStore();
            store.on('load', function(store) {
                selectionRowModel.select(selectedIndex, true, true);
            }, this, {
                single: true
            })
            store.load();
        }
    }
});

How to restore grid focus after data reload in ExtJS?

1 Answers