How to clear Ext forms
Perhaps you know the problem:
You have an Ext form into which you loaded data through the load() method. Later on you want to clear the form because you want to reuse it for a new empty record. In this case the forms reset() method will not work like you want, because it will reset the forms values to the last loaded values from load().
But if you go through all fields and use setValue() with an empty string, the isDirty() method always returns true because the fields where modified manually.
However, the solution is easy: Load an empty record into the form. This lets reset() work afterwarts correctly, and also lets isDirty() work like it should. The tricky part is, automatically creating an empty record which contains all fields the form expects.
Here is a simple plugin which you may drop into a FormPanel or BasicForm:
/** * This plugin can be either used on BasicForm or FormPanel. * In both cases it adds a method clear() to the object * which allows to clear (empty) all the forms values. * This is opposed to the reset() method which resets all values * to the last values loaded through a call to load(). * But sometimes (e.g. when you want to recycle an existing form for use * for a new record, you have to clear the form and also corectly reset * the isDirty() flag. * * */ Ext.ux.FormClear=function() { this.init=function(_object) { if (typeof _object.form=="object") { //we are a formpanel and have a form, be kind and also add the method to the basic form //clear method for the underlying form: _object.form.clear=function() { var data={}; this.items.each(function(item) { data[item.getName()]=null; }); var emptyRecord=new Ext.data.Record(data); this.loadRecord(emptyRecord); }; //clear method for the forpanel itself _object.clear=function() { var data={}; this.items.each(function(item) { data[item.getName()]=null; }); var emptyRecord=new Ext.data.Record(data); this.form.loadRecord(emptyRecord); }; } else { //we are a basicform _object.clear=function() { var data={}; this.items.each(function(item) { data[item.getName()]=null; }); var emptyRecord=new Ext.data.Record(data); this.loadRecord(emptyRecord); }; } }; };
It enhances both FormPanel or BasicForm with a clear() method which clears all form fields and resets the form to a new empty form.
To use it simply add the following line to a FormPanel or BasicForm config-object:
plugins:[new Ext.ux.FormClear()]
That will then automatically add the clear() method to the FormPanel/BasicForm.
I hope some of you find it useful, because I know some of you already stumbled upon this issue.
Hi,
I looked for something like this, thanks. Unfortunately your function does not recurse in the form (there must not be fields in a form [panel] – it could be another panel (maybe with a different layout) with another panel… with fields), so you better gather the data with something like:
var values = this.getForm().getValues();
for(var val in values){
data[val]=null;
}
new Ext.data.Record(emptyRecord);
and then load the record. This will not call getName() on an item which may be a panel.
Cheers, Thorsten