5

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

我已经让密钥处理程序工作了——它选择了突出显示的日期并关闭了日历——但我无法让它进入下一个字段。

我是否必须从标签顺序中确定下一个字段是什么并尝试设置其焦点？这似乎相当令人费解。或者我可以触发一些事件来让我的控件自动切换到下一个字段（即捕获Tab日历中的按键并处理它，就像我正在做的那样，然后将它转发到基础日期字段）？

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

4

1 回答 1

6

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

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 以来所有基本方法都应该可用。如果您仍然遇到问题，请分享您的一些代码。

不碍事，让浏览器在本地完成它的工作通常是最好和最强大的解决方案......

方法二。如果你有一个包含多个元素的复杂组件，你仍然可以实现方法一的情况。通过强制焦点在主输入元素（通常是文本字段）上，同时使用CSS（a KeyNav / KeyMap在主输入元素中会很方便）。您基本上只是捕获了用户可能将焦点设置在弹出窗口上（例如单击它）并将焦点重新定位到您的主要元素的所有情况。

这仍然可以确保 html 元素的自然 tab 顺序，即使其中一些不是组件。我相信这是最好的方法，而且大部分时间都值得努力实现。

这就是ComboBox和DatePicker等组件的工作方式（您可以看到后者总是在更新 vaule 后将焦点设置为主要元素。ComboBox 的焦点逻辑有点复杂。看看源代码链接如果您对如何在组件中实现它感到困惑，那么很有见地。

方法三。最后一招。如果您仍然需要以编程方式关注另一个（邻居）字段，那相对容易做到。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();
}

PS 您可以通过 dispatchEvent() 人为地触发Tab按键，但由于安全原因，它不会触发选项卡导航操作。

于 2012-10-26T16:19:11.723 回答