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

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

1 个答案: