ExtJS 数据重新加载后如何恢复网格焦点？

Question

我在 ExtJS 中有一个视图，其中包含一个网格，用户可以在其中选择一个条目以及一些包含当前所选行详细信息的面板。每次选择另一行时，都会重新加载视图，这会导致网格失去键盘导航的输入焦点。

如何重新加载网格存储数据并使输入焦点保持在网格上？我的模型定义了idProperty，因此选择了正确的行，但列选择和输入焦点丢失了。我正在使用 ExtJS v7.3.0.55 和 Classic Triton 主题。

例子

使用 JSON Store Sencha Fiddle 和数据模型和一些网格事件监听器扩展现有网格中的代码以重现该问题：

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'

            }],

Answer 1

尝试将选择放入商店的加载处理程序中：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();        }    }});