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方法，以便返回扩展的基本表单。

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

1 个答案: