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键一样完全工作。 我的意思是，它在输入字段方面可以正常工作，但在其他控件方面则不能。 也许有一些低级解决方案。 你有什么想法吗？

- mik

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();
        }                   
    }
});

- egerardus

---

这是哪个版本的Ext？我猜不是ExtJS 4.x。 - mik

@mik 在4.1.0版本中，这对我有效。我意识到我没有将其用于表单字段，而表单字段事件不会针对组件，因此这将无法工作。我编辑了我的答案，使其特别适用于表单字段。 - egerardus

Answer 2

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

ExtJS API文档

- Styles

Answer 3

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

话虽如此，或许可以尝试以下内容：

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

- Anthony Mills

Answer 4

你可以尝试这个。

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

我自己从未真正尝试过这个。

- Varun Achar