javascript - 以编程方式切换到 Ext JS 中的下一个控件

Question

我在 Ext JS 2.x 中围绕 Ext.Form.DateField 编写了一个包装器 UX 控件，以稍微不同的方式处理按键。特别是，当显示日历时，我希望使用 Tab 键选择突出显示的日期并移至下一个表单字段。

我已经让 key 处理程序正常工作 - 它选择突出显示的日期并关闭日历 - 但我无法将其切换到下一个字段。

我是否必须根据 Tab 键顺序找出下一个字段是什么并尝试设置其焦点？这看起来相当复杂。或者我可以触发一些事件来让我的控件自动切换到下一个字段(即捕获日历中的 Tab 按键并处理它，就像我正在做的那样，但然后将其转发到基础日期字段)？

<小时/>

编辑:总之，是否有一种 Ext(或者至少是跨平台)方法可以在特定表单字段触发键盘事件？

Answer 1

方法一。 只是不要在 keypress/keyup 事件处理程序中执行 event.preventDefault() ，这样就不会阻止浏览器执行默认操作，即选项卡导航。这个例子有效:

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    width: 300,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        name: 'name',
        fieldLabel: 'Name',
        listeners: {
            specialkey: function(me, e) {
                if (e.getKey() == e.TAB) {
                        console.log('Tab key pressed!');
                        // do whatever you want here just don't do e.preventDefault() or e.stopEvent() if you want the browser tab to next control
                    }
            }
        }
    }, {
        xtype: 'textfield',
        name: 'email',
        fieldLabel: 'Email Address',
    }]
});

我在 Ext 4 中尝试过，但自 Ext 2 以来所有基本方法都应该可用。如果您仍然遇到问题，请分享您的一些代码。

摆脱困境并让浏览器本身完成其工作通常是最好和最强大的解决方案......

<小时/>

方法 II。如果您有一个包含多个元素的复杂组件，您仍然可以通过强制将焦点放在主要内容上来实现方法 I。的情况。输入元素(通常是文本字段)，同时使用 CSS 模拟弹出元素内的焦点项目(主输入元素中的 KeyNav/KeyMap 在这里会很方便)。您基本上只需捕获用户可能将焦点设置在弹出窗口上(例如单击它)并将焦点弹回主元素的所有情况。

这仍然可以确保 html 元素的自然 Tab 键顺序，即使其中一些不是组件。我相信这是最好的方法，并且在大多数时候都值得努力实现。

这就是像 ComboBox 这样的组件的方式和 DatePicker工作(正如您所看到的，后者总是在值更新后将焦点设置到主元素。ComboBox 的焦点逻辑有点复杂。如果您对如何进行操作感到困惑，请查看源代码链接在您的组件中实现它，非常有洞察力。

<小时/>

方法 III。 最后的手段。如果您仍然需要以编程方式关注另一个(相邻)字段，那么这相对容易做到。Ext 2.3 的代码(虽然没有测试，我正在使用文档):

var formPanel,  // containing form panel
    currentField, // the field you need to navigate away from

    fields,
    currentFieldIdx,
    nextField;

fields = formPanel.getForm().items;
currentFieldIdx = fields.indexOf(currentField);

if(currentFieldIdx > -1) {
    nextField = fields.itemAt(currentFieldIdx + 1);
    nextField && nextField.focus();
}

<小时/>

附注您可以通过dispatchEvent()人为地触发Tab按键，但它will not trigger出于安全原因，选项卡导航操作。