javascript - ExtJs 在 ENTER 按键上模拟 TAB

Question

我知道这不是最聪明的主意，但我仍然必须这样做。我们的用户希望像 TAB 一样使用 ENTER。所以，我想出的最好的是：

Ext.override(Ext.form.field.Base, {
            initComponent: function() {
                this.callParent(arguments);

                this.on('afterrender', function() {
                    var me=this;
                    this.getEl().on('keypress',function (e){
                        if(e.getKey() == 13) {
                            me.nextNode().focus();
                        }
                    });
                });
            }
        });

但它的工作方式仍然与 TAB 不完全相同。我的意思是，它适用于输入字段，但不适用于其他控件。可能有一些低级的解决方案。有任何想法吗？

Answer 1

在过去，我已将侦听器附加到文档中，如下所示：

Ext.getDoc().on('keypress', function(event, target) {

    // get the form field component
    var targetEl = Ext.get(target.id),
        fieldEl = targetEl.up('[class*=x-field]') || {},
        field = Ext.getCmp(fieldEl.id);

    if (
        // the ENTER key was pressed...
        event.ENTER == event.getKey() &&

        // from a form field...
        field &&

        // which has valid data.
        field.isValid()

        ) {

        // get the next form field
        var next = field.next('[isFormField]');

        // focus the next field if it exists
        if (next) {
            event.stopEvent();
            next.focus();
        }                   
    }
});

Answer 2

对于 Ext.form.field.Text 和类似的 xtypes，enableKeyEvents在 keypress/keydown/keyup 事件触发之前需要设置一个额外的配置。配置enableKeyEvents选项需要设置为 true，因为它默认为 false。

ExtJS API 文档

Answer 3

免责声明：我不是 ExtJs 方面的专家。

也就是说，也许尝试类似：

if (e.getKey() === 13) {
    me.blur();
    return false;  // cancel key event to prevent the [Enter] behavior
}

Answer 4

你可以试试这个

if (e.getKey() === 13) {
    e.keyCode = Ext.EventObject.TAB
    this.fireEvent(e, {// any additional options
   });
}

我自己还没有真正尝试过。