ExtJS（4.2.2）嵌套表单验证行为

Question

当一个Ext.form.Panel包含另一个Ext.form.Panel时，内部面板验证会冒泡到外部面板。

我有一个具有hasMany关系的嵌套模型。 内部表单面板用于将子模型的记录添加到父记录。 内部表单面板具有其自己的验证逻辑和保存按钮，该按钮将内容添加到父级。

但是外部模板现在被内部模板无效，这不是我想要的。 当我要保存整个记录（包括hasMany关系）时，内部表单面板可能（并且应该）非常空白（并且无效）。

如何防止内部模板的验证传播到外部模板？

考虑到ExtJs对嵌套模型的支持，这似乎是合乎逻辑的事情，但似乎在任何地方都不受支持。 添加孩子时，我也不想弹出任何窗口。 它应该与父表单很好地集成在一起

谢谢你的帮助。

解

使用field.up('form')可能会稍微影响性能，因此请注意。

Ext.define('Custom.form.Basic', {
    extend: 'Ext.form.Basic',

    onFieldAdd: function (field) {
        if (field.up('form') == this.owner)
            this.callParent(arguments);
    },

    onFieldRemove: function (field) {
        if (field.up('form') == this.owner)
            this.callParent(arguments);
    },

    getFields: function () {
        var owner = this.owner;
        return this.monitor.getItems().filterBy(function (f) {
            return f.up('form') == owner;
        });
    }
});

Ext.define('Custom.form.Panel', {
    extend: 'Ext.form.Panel',

    requires: [
        'Custom.form.Basic'
    ],

    createForm: function () {
        var cfg = {},
            props = this.basicFormConfigs,
            len = props.length,
            i = 0,
            prop;

        for (; i < len; ++i) {
            prop = props[i];
            cfg[prop] = this[prop];
        }
        return new Custom.form.Basic(this, cfg);
    }
});

Answer 1

此问题与Ext.form.Panel不相关，而与Ext.form.Basic 。 每个FormPanel包含Ext.form.Basic ，并且该基本表单负责验证。 为避免这种情况，您可以扩展基本形式并修改onFieldAdd和onFieldRemove方法的行为。 通过设计，它可以在任何级别将处理程序添加到面板的所有子字段中。 然后，应扩展Ext.form.Panel createForm方法，以便它返回扩展的基本表单。