Within my ExtJS view, there is a grid where users can select an entry along with a panel displaying details about the selected row. However, every time a different row is chosen, the view is reloaded causing the grid to lose focus for keyboard navigation.
I am looking for a solution to reload the grid store data while maintaining input focus on the grid. Although my model specifies idProperty and correctly selects the row, the column selection and input focus are lost during the reload process. I am currently using ExtJS v7.3.0.55 with the Classic Triton theme.
For example,
To demonstrate this issue, extend the code within the existing Grid with JSON Store Sencha Fiddle by implementing a data model and adding a grid event listener:
Ext.application({
name: 'Fiddle',
launch: function () {
// Custom data model with 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',
url: 'simpsons.json', // Load data from ./simpsons.json in the fiddle ./Data folder
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'
}],
listeners: {
select: function (sender) {
console.log('grid selection update');
var record = sender.getSelected(); // Get selected record
var store = sender.getStore();
store.load(); // Reload store data
sender.setSelected(record); // Restore selected row
}
}
});
}
});