Extjs 4 dynamically adding multiple panels to a form

Question

I have 3 panels and each panel will have 7 - 10 fields.

The main form panel contains a combo field and the 3 panels.

Based on the combo selected value i'm hiding the remaining 2 panels and showing one panel.

All these three panels have allowBlank: false validations for the fields.

While submitting the form, the fields which are hidden are also validated and prevents the form from submitting. So i want to disable the fields which are hidden. i'm using this code.

question_multiple_option.query('.component').forEach(function(c){c.setDisabled(true);});

But in EXT 4.X disabled fields are also validated while submitting a form.

In Ext 2.X and 3.X disabled fields are not validated and not submitted.

previously i used this code in ext 2.X

 Ext.getCmp('option').cascade(function(comp){
                        if (comp.isFormField) {
                            //comp.enable();
                              comp.disable();
                        }
                    });

Is it the right way to implement a form with multiple panels by hide and showing the panels. Or how can i add / remove a panel to a form dynamically ?.

Is there any better way to implement this kind of form.

Thank you.

egerardus egerardus · Accepted Answer · 2012-02-21T17:50:12

Nicely phrased q.

It is not supposed to be validating disabled fields.

There was a bug about this that was fixed in 4.1. I'm not sure how it looks in whatever 4.x version you are using but you could add an override in your code to the isValid method of Ext.form.field.Base to match the 4.1 code if you can't migrate. Something like this:

Ext.override(Ext.form.field.Base, {
    isValid : function() {
        var me = this;
        return me.disabled || Ext.isEmpty(me.getErrors());
    }
});

Extjs 4 dynamically adding multiple panels to a form

1 Answers