Question

我使用Ext Js v6.2网格，在我的应用程序中，我有三组文本域，我想使用ArrowKey导航文本域[UP] [DOWN ] [右] [左] 下面的代码没有在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

您需要在ExtJS中使用KeyNav。

Ext.util.KeyNav为标准化键盘导航提供了方便的包装。 KeyNav允许您将导航键绑定到按下键时将调用的函数调用，从而为任何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();
            }
        }
    }
});

Ext js6.2，使用箭头键导航文本字段

1 个答案: