View Full Version : Excel-style keyboard navigation in an editable Grid

3 Apr 2012, 2:39 PM
We're considering implementing ExtJS 4 in our next project, but our initial tests of the library have come up with some potential limitations of the CellEditing Grid plugin.

One thing we would like to accomplish is to create a grid into which the user will be able to enter a long list of numbers. We would like the user to be able to finish editing by pressing "Enter" and then automatically move to the cell below and start editing.

Ext.grid.plugin.CellEditing seems to work well for this purpose, but I can't find a way to detect the keyUp event. I tried approaching the matter using the "edit" event with the code below.

selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
edit: function (editor, e, eOpts) {
// If the event is fired by pressing "Enter", the column and row associated with event will
// be the same as the currently selected row and column

if (e.grid.selModel.position.column == e.colIdx && e.grid.selModel.position.row == e.rowIdx){

// Check if we are in the final row
if (e.rowIdx+1 == e.grid.getStore().getTotalCount()){
return true;

editor.startEditByPosition({row: e.rowIdx+1, column: e.colIdx});
return false;

The problem with this approach is that if the user starts editing the cell, then clicks on a GUI element outside of the Grid, the edit event does not distinguish this from pressing the "Enter" key.

Any help will be appreciated.

3 Apr 2012, 4:25 PM
Have a look at the following: