Ext js6.2，使用箭头键浏览文本字段

Question

我正在使用Ext Js v6.2 Grid，在我的应用程序中，我有三组文本字段， 我想使用ArrowKey的[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();
        }
    }
);

像这个我想演示

Answer 1

您需要在ExtJS中使用KeyNav 。

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

在ExtJ中，具有方法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();
            }
        }
    }
});