ExtJS (4.2.2) nested form validation behavior

Question

When an Ext.form.Panel contains another Ext.form.Panel, the inner panel validation bubbles up to the outer panel.

I have a nested model with a hasMany relationship. The inner form panel is used to add records of the child model to the parent record. The inner form panel has its own validation logic and save button which adds the contents to the parent.

But the outer form panel now is invalidated by the inner form panel, which is not what I want. The inner form panel may (and should) very well be empty (and invalid) when I want to save the entire record (including the hasMany relationship).

How to prevent the validation of the inner form panel to propagate up to the outer form panel?

This seems like a logical thing to do considering ExtJs' support for nested models, but doesn't seem to be supported anywhere. I don't want to pop out some window either when adding children. It should be nicely integrated with the parent form

Thanks for any help.

SOLUTION

Using field.up('form') may impact performance somewhat, so beware.

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

Krzysztof Krzysztof · Accepted Answer · 2014-11-29T11:44:18

This problem is related not with Ext.form.Panel but with Ext.form.Basic. Each FormPanel contains Ext.form.Basic, and that basic form is responsible for validation. To avoid that you can extend basic form and modify onFieldAdd and onFieldRemove methods behaviour. By design it add handlers to all child fields of panel at any level. Then you should extend Ext.form.Panel createForm method so it return your extended basic form.

ExtJS (4.2.2) nested form validation behavior

1 Answers