How to set Ext.Form dirty state?

Question

How to change the state dirty of a form to false?

Is there something like setDirty(false) method of Ext.Form.Panel?

UPD:

My task is to track Form dirty state for enabling docked SAVE button to become enabled only if there are any changes in the form.

I'm tracking dirtychange event with:

init: function() {
    this.control({
        'form': {
            dirtychange: function(form) {
                alert('change');      
            }
        }
    });
}

But when I'm loading a record through loadRecord() method into the Form I'm geting chage alert while loading record and Form becomes dirty after Record was loaded.

I'd like to reset dirty state of a Form right after Record loading and start tracking dirtychange event on record filled form.

Any ideas?

Answer 1

Correction

There is a property available which changes the original-value when a value get set.

trackResetOnLoad: true

See this JSFiddle

Old answer below might be quit inconvenient but I let it unchanged

First I have to say you will not find any such method

And that's because the form has not such a state, the fields have it. All what the form does is iterating over each field and check if it is dirty. If any field is dirty it will be checked if this value (the dirty mark) has changed since the last check and if so the dirtychange event is fired. Then this get saved as last check (wasDirty)

Now let's look at the fields cause they really trigger it:

They are checking onChange and onReset if the field is dirty by checking !me.isEqual(me.getValue(), me.originalValue) where originalValue is the value that was set the time initValue was called.

Now what's to do to 'set' the Form no longer 'dirty'

Iterate over all fields of the form by using getFields() on Ext.form.Basic now we will set the current value as original value (reset will now reset to this value) by calling initValue on each field and that's it.

wrong code removed

Edit

Well I've modified my last code from above to

var items = form.getForm().getFields().items,
      i = 0,
      len = items.length;
  for(; i < len; i++) {
    var c = items[i];
    if(c.mixins && c.mixins.field && typeof c.mixins.field['initValue'] == 'function') {
      c.mixins.field.initValue.apply(c);
      c.wasDirty = false;
    }
}

and forked a working example. The Button will stay inactive till any changes are detected and will again set inactive if you remove the changes. Play around with it I guess this is what you'Re looking for.

Answer 2

There is the method reset(). If used without an argument it retains the form data loaded with loadRecord().

So if you call reset() after loading the data, your form should not be dirty any more.

myForm.loadRecord(record);
myForm.reset();

I think, the dirtychange event will also be called by loading the data, but after the reset() you can check the form with isDirty().

Answer 3

A workaround here is to use a hidden field and set it's value to force the form dirty. We use this in widgets which do not contain form fields. To set the form dirty, we simply change the value of the hidden-field, to set it clean, we reset it to the original value.