Блог

У меня есть представление в ExtJS, которое содержит сетку, в которой пользователь может выбрать запись, а также некоторую панель с подробной информацией о текущей выбранной строке. Каждый раз, когда выбирается другая строка, представление перезагружается, что приводит к тому, что сетка теряет фокус ввода для навигации с клавиатуры.

Как я могу перезагрузить данные хранилища сетки и сохранить фокус ввода на сетке? Моя модель определяет idProperty , и, таким образом, выбирается правильная строка, но выбор столбца и фокус ввода теряются. Я использую ExtJS версии 7.3.055 с классической темой Triton.

Пример

Расширьте код в существующей сетке с помощью хранилища JSON, поиграйте с моделью данных и некоторым прослушивателем событий сетки, чтобы воспроизвести проблему:

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

Попробуйте поместить выделение в обработчик загрузки хранилища:

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