Question

我在Ext.Form.DateField周围的Ext JS 2.x中编写了一个包装器UX控件，以略微区别地处理按键。特别是，当显示日历时，我希望 Tab 键选择突出显示的日期并移动到下一个表单字段。

我已经让密钥处理程序正常工作 - 它会选择突出显示的日期并关闭日历 - 但我无法将其设置为标签到下一个字段。

我是否必须从Tab键顺序中找出下一个字段的内容并尝试设置其焦点？这似乎相当复杂。或者我可以触发一些事件以使我的控件自动切换到下一个字段（即捕获日历中的 Tab 按键并处理它，就像我正在做的那样，然后将其转发到基础日期场）？

编辑总之，是否有一种Ext（或至少是跨平台）方式在特定表单字段中触发键盘事件？

Answer 1

接近我。只是不要在你的按键/键盘事件处理程序中执行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这样的组件的工作方式（正如你可以看到后者在更新vaule之后总是将焦点设置为主元素.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();
}

P.S。您可以通过dispatchEvent（）人工触发Tab按键，但由于安全原因，它会will not trigger选项卡导航操作。

以编程方式选项卡到Ext JS中的下一个控件

1 个答案: