Results 1 to 2 of 2

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

  1. #1
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Location
    INDIA
    Posts
    130
    Answers
    7

    Default Answered: Arrow Key navigation is not working correctly with cellEditing plugin in IE10, IE 11

    Hi,

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

    Description:
    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

    https://fiddle.sencha.com/#fiddle/reg

    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.
    ---A ship in the harbor is safe, but that is not what the ships are made for...

  2. 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)

    Code:
    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;
                cellMod.setCurrentPosition(newPos);
            }
            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?):

    https://fiddle.sencha.com/#fiddle/ron

  3. #2
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Location
    INDIA
    Posts
    130
    Answers
    7

    Default I have implemented a workaround for this and that looks working fine now.

    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)

    Code:
    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;
                cellMod.setCurrentPosition(newPos);
            }
            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?):

    https://fiddle.sencha.com/#fiddle/ron
    ---A ship in the harbor is safe, but that is not what the ships are made for...

Similar Threads

  1. arrow key navigation and selection is not working
    By vpackiaraj in forum Ext 5: Q&A
    Replies: 3
    Last Post: 20 Apr 2015, 6:14 AM
  2. Replies: 4
    Last Post: 27 Feb 2013, 12:27 PM
  3. Replies: 4
    Last Post: 30 Aug 2012, 3:48 AM
  4. Replies: 3
    Last Post: 8 Jul 2012, 11:53 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •