Forms 多页表单：将无效字段置于焦点

我有一个多页表单，有40多个字段分布在多个选项卡上，并分组在可折叠的字段集中

现在我遇到了这样的情况，在表单提交时，一个字段被检测为无效，我想为用户找到该字段，将其放入可见区域并聚焦它。因此，我必须切换到右侧选项卡，打开字段集（如果适用），将字段滚动到可见区域并聚焦

我想ExtJS有一个函数可以实现这一点，但我没有找到。我的代码：

// Get first invalid field. C&P from Ext.form.Basic.isValid function
var invalidField = me.getForm().getFields().findBy(function(f) {return !f.isValid();});
if(invalidField) {
    // TODO: Bring the field to front.
    // Now focus the field:
    invalidField.focus();

---

是否有内置函数可用？

Ext JS没有提供专门用于执行此操作的内置方法，但它提供了所有必要的实用方法并支持动画。至少，确保表单配置为可滚动，设置活动选项卡并关注无效字段足以滚动到正确位置。我创建了一个小提琴示例来演示解决方案

---

你好，亚历山大。我有完全相同的问题要解决，但我还没有找到解决方案，这就是为什么你的问题对我来说非常重要。在我的例子中，为了解决这个问题，我考虑将表单选项卡验证为一个选项卡。在一个非常不同的情况下，但可能会感兴趣地看一下这篇文章：我还要检查字段是否有isValid（）方法。表单可以包含没有它的字段<代码>Ext.isFunction（field.isValid）&&！field.isValid（）

tabPanel.items.each(function(tab) {
    var formPanel = tab.down('form');
    formPanel.getForm().getFields().each(function(field, index, length) {
        if (!field.isValid()) {
            tabPanel.setActiveTab(tab);
            // Focusing an element will set the correct scroll position.
            // However, an animation can help the user follow along.
            formPanel.setScrollY(field.getPosition()[1], true);
            field.focus();
            return false;
        }

        return true;
    });
});