多页表单：使无效字段成为焦点

Question

我有一个多页表单，其中有 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();

是否有内置函数可用？

Answer 1

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

Sencha Fiddle: An Example of Scrolling to an Invalid Field in a Tab

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

http://docs.sencha.com/extjs/6.2.0/classic/Ext.Component.html#method-getPosition http://docs.sencha.com/extjs/6.2.0/classic/Ext.Component.html#method-setScrollY