javascript - Extjs6.2，使用箭头键导航文本字段

Question

我正在使用 Ext Js v6.2 Grid，在我的应用程序中，我有三组文本字段，我想使用箭头键的 [UP][DOWN][RIGHT][LEFT] 下面的代码在 Ext js 中未触发，请解决问题。

脚本

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

LIKE THIS-I WANT-DEMO

​

Answer 1

您需要使用KeyNav在 ExtJS 中。

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

在ExtJs中有方法next()和 prev()因此您可以将其用于您的组件，例如 textfield.next() 和 textfield.prev()。

在此FIDDLE ，我使用 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();
            }
        }
    }
});