View Full Version : Arrow Key navigation is not working correctly with cellEditing plugin in IE10, IE 11

3 Aug 2015, 11:16 PM

Platform : 4.2.1 [IE10, IE11, CHROME(Version 44.0.2403.107 m)]

I am having an issue with IE10 and IE11 while doing arrow key navigation with cell Editing plugin.

How to reproduce:
Please open below fiddle in Chrome first


Click on the very first cell and navigate using arrow key in all cells
1. Up/Down/Left/Right action is working fine and opening cell editor okay

Till here everything works as expected according to my requirement.

Now open the same fiddle in IE10 or IE11.
Follow the same steps here too and see the difference as compared to Chrome's output.

Issue in IE is that:
Up/Down arrow keys are not opening the cell editor, If we press the up/down keys then only the cell is getting highlighted. But cell should open the editor mode.

Here my requirement is that IE10, IE11 must behave like the chrome's output.

Please try to reproduce with given fiddle.


Please guide me. Any help will be appreciated. =P~

12 Aug 2015, 8:31 PM
Fixed the issue by getting new position of cell using views walkcells and also used Ext.defer (Only urgent for UP/Down arrow keys, otherwise cell modal not to allow open cell editor)

function getDirection(e) {
if (e.getKey() == e.LEFT) return 'left'
else if (e.getKey() == e.RIGHT) return 'right'
else if (e.getKey() == e.UP) return 'up'
else if (e.getKey() == e.DOWN || e.getKey() == e.ENTER) return 'down'

function specialKeyFunction(field, e) {
if (e.getKey() == e.UP || e.getKey() == e.DOWN) {
if (!((whenUpDownArrows == 1 && e.shiftKey) || whenUpDownArrows == 2)) return;
} else {
if (!((whenLeftRightArrows == 1 && e.shiftKey) || whenLeftRightArrows == 2)) return;
var pos, newPos, dir, grid, cellMod;
grid = field.up('grid')
cellMod = grid.selModel;
pos = grid.selModel.getCurrentPosition();
dir = getDirection(e);
if (pos && (e.getKey() == e.LEFT) || e.getKey() == e.RIGHT || e.getKey() == e.UP || e.getKey() == e.DOWN) {
newPos = pos.view.walkCells(pos, dir, e, cellMod.preventWrap);
if (newPos) {
newPos.view = pos.view;
if (Ext.isIE) {
Ext.defer(function () {
grid.editingPlugin.startEdit(newPos.row, newPos.column);
}, 100)
else {
grid.editingPlugin.startEdit(newPos.row, newPos.column);

Working fiddle (Verified in IE10, IE11, Chrome, Firefox?): =P~=P~