Validation in Dynamically Generated forms in Extjs

Question

I'm doing eforms framework design, In this there will be multiple products available and each product will have different kind of forms. On drag and drop it'll appear in the form panel, these form panel data's are retreived from Json file. We have json file for each forms. If i want to add validations to those fields in forms means how can I accomplish this, bcoz form fields are available in json which will be dynamically generate on drag and drop.

Can u guys help me with this.

thanks and regards rajNaveen

Answer 1

Are you associating model, with the forms? If so, you can put you validation logic in the model. For example:

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: ['field1', 'field2'],
    validations: [
         { type: 'presence', field: 'field1' }
    ]
});

Some more information about validations config: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.validations

But you will need a little magic for them to work with form. This is the code from controller (using MVC):

onFormSave(): function() {
    var form = this.form.getForm(),
        updatedRecord = MyModel.create();
    form.updateRecord(updatedRecord); //saved all the data from the form, to empty object
    var errors = updatedRecord.validate(); //validate the object
    if (errors.isValid()) { //if the object is valid, then save the data to the model associated with the form.
        form.updateRecord(form.getRecord());
    }
    else {
         form.markInvalid(errors);
    }
}

Logic inside this is pretty simple, i created a new instance of the object and validate it. If validation is OK, then save the data to the object within the form, that will be submited, if not, then display the errors.