ExtJS: Reset invalid controls to its last good value

Ext.form.Panel control contains two interesting events (inherit from BasicForm):

• validitychange
• dirtychange

These events help to monitor if a form is valid or not (the alternative is to monitor each field from that form)

If you try to reload the store or view model for that form and the form contains invalid values - the fields are marked with "red" - the new values from store are not loaded (the fields remains marked with red and with the invalid values). This is happening because the field in store is not changed till a valid value is provided.

liStore.loadRawData(testModel, false);


To overcome this issue, my solution is to restore the valid values in invalid controls.
This solution supposes two steps:
- identify the invalid fields (http://stackoverflow.com/questions/19354433/extjs-form-isvalid-is-false-but-how-to-know-why-the-form-is-invalid)

    getInvalidFields: function(formCtrl) {

        var invalidFields = [];
        Ext.suspendLayouts();
        formCtrl.form.getFields().filterBy(function(field) {
            if (field.validate()) return;
            invalidFields.push(field);
        });
        Ext.resumeLayouts(true);
        return invalidFields;
    },

- restore the valid values (last valid values)

        var invalidFields = this.getInvalidFields(formCtrl);
        invalidFields.forEach(function(f) {
            //console.log(f);
            f.setValue(f.bind.value.lastValue);
        });