Javascript ExtJS6.2，使用箭头键导航文本字段

我使用的是Ext Js v6.2网格，在我的应用程序中，我有三组textfield，我喜欢使用ArrowKey的[UP][DOWN][RIGHT][LEFT]导航textfield下面的代码在Ext Js中不触发，请解决问题

脚本

$(document).keydown(
    function(e)
    {    
        if (e.keyCode == 39) {      
            $(".move:focus").next().focus();
        }
        if (e.keyCode == 37) {      
            $(".move:focus").prev().focus();
        }
    }
);

​

您需要在ExtJS中使用

Ext.util.KeyNav

为规范化键盘导航提供了方便的包装。KeyNav允许您将导航键绑定到按下键时将被调用的函数调用，从而为任何UI组件实现自定义导航方案提供了一种简单的方法

在ExtJs中，有一个方法，因此您可以将它用于组件，如

textfield.next（）

和

textfield.prev（）

在这个中，我使用

Ext.util.KeyNav

创建了一个演示，它正在按照您的要求工作。希望这将帮助您或指导您实现您的要求

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    title: ' Example with key Navigation',
    layout: 'hbox',
    defaults: {
        xtype: 'textfield',
        flex: 1,
        margin: 10
    },
    items: [{
        emptyText: 'A'
    }, {
        emptyText: 'B'
    }, {
        emptyText: 'C'
    }, {
        emptyText: 'D'
    }, {
        emptyText: 'E'
    }],
    listeners: {
        afterrender: function () {
            var panel = this;
            panel.keynav = Ext.create('Ext.util.KeyNav', {
                target: Ext.getBody(),
                scope: panel,
                left: panel.doFocusToText,
                right: panel.doFocusToText
            });
        }
    },
    /*
    * this will fire on left or right key pressed.
    * @param {Event} e
    */
    doFocusToText: function (e) { //{ http://docs.sencha.com/extjs/4.2.5/#!/api/Ext.EventObject }
        var panel = this,
            current = panel.down('[hasFocus=true]');

        if (e.LEFT == e.getKey()) {
            if (current.prev()) {
                current.prev().focus();
            }
        } else {
            if (current.next()) {
                current.next().focus();
            }
        }
    }
});

---

请同时提供Extjs代码以获得更好的答案。创建sencha fiddle链接：