Reset Form Record Not Clearing Values - ExtJS 4.2

Question

I have a Grid panel containing records which, on-click, will be loaded into a Form panel for editing.

On "close" of our form panel, we're calling myForm.getForm.reset(), which seems to reset the record but the values in the form fields themselves persist.

// Load record
me.down('form').loadRecord(record);
// Close
me.down('form').getForm().reset() or me.down('form').reset()

Please advise how to also clear values in the form upon resetting our record.

Answer 1

Do you have trackResetOnLoad set to true for the form? If so, what you really want is it set to false.

Answer 2

Maybe you need set 'resetRecord' parameter into 'reset()' method for unbind any record set by 'loadRecord' method.

Example:

me.down('form').getForm().reset(true)

Answer 3

You can override the default form panel to add this functionality. Add the following to your code:

 Ext.override(Ext.form.Panel, {
     clearForm:function(){
         Ext.each(this.getForm().getFields().items, function(field){
                field.setValue('');
         });
     }
});

You can then clear a form using:

myForm.clearForm()

Where myForm is your form panel.

The reset() method just resets the form back to the last record loaded.

Answer 4

If you want to maintain trackResetOnLoad=true (e.g. so you can use the form's "dirtychange" event) another approach is to take a copy of the values just after the form is created like var originalValues = myForm.getFieldValues(); then simply restore those values using myForm.setValues(originalValues); instead of calling myForm.reset(...);

Answer 5

You can try this...

this.up('form').getForm().reset();