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

Question

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

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

例子

使用数据模型和一些网格事件侦听器扩展现有 Grid with 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'
            }],

            // 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);
                }   
            }
        });
    }
});

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();
        }
    }
});

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

How to restore grid focus after data reload in ExtJS?

javascript

extjs

datagrid