PDA

View Full Version : How to prevent for double submiting form



hudi1
5 Jun 2013, 5:06 AM
Hi,


my action when submiting form:


onAcceptAddPersonClick : function(button, e, eOpts) {
console.log("onAcceptAddPersonClick");

button.disable();
var dialog = Ext.getCmp("PersonAdd");
var form = dialog.down("form");
var values = form.getValues();

if (form.isValid()) {
console.log(values);
form.submit({
reset : true,
scope : this,
success : function(form, action) {
this.doGridRefresh();
this.buildDetails(action.result.id);
dialog.close();
button.enable();
},
failure : function(form, action) {
console.log(action.result);
button.enable();
}

});
} else {
button.enable();
}
},

As you can see I am solving this problem with disable/enable button. Problem is in duplicity (3 times tu enable button). I didint find common action for success/failure and I cant add it to the end of function because submiting is calling asynchronous. Is there option how to handle this problem globaly for all buttons ?

evant
5 Jun 2013, 5:24 AM
You don't really need 3 times:



onAcceptAddPersonClick : function(button, e, eOpts) {
var dialog = Ext.getCmp("PersonAdd");
var form = dialog.down("form");
var values = form.getValues();

if (form.isValid()) {
button.disable();
form.submit({
reset : true,
scope : this,
success : function(form, action) {
this.doGridRefresh();
this.buildDetails(action.result.id);
dialog.close();
button.enable();
},
failure : function(form, action) {
console.log(action.result);
button.enable();
}

});
}
},

Arg0n
5 Jun 2013, 5:27 AM
You could use the mask (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.dom.AbstractElement-method-mask) function:


form.getEl().mask('Saving...');

and when finished:


form.getEl().unmask();

This will make your whole form uneditable and unclickable and the user knows when the save finished, too =)

hudi1
5 Jun 2013, 5:38 AM
but the problem is still same. I need to add mask immediatelly when button is pressed. And then I need to add unmask 3 times as in my first post

Arg0n
5 Jun 2013, 5:43 AM
Nop, 2 times ^^

One in "success" and one in "failure". If you want to do it automaticly you would need to override the submit method. Or make your own submit action (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.action.Submit).

hudi1
5 Jun 2013, 5:49 AM
and 3. when form isnt valid = too much duplicity

Arg0n
5 Jun 2013, 6:07 AM
Naaah xD

2 times ^^

You only mask your form, if it is valid. So you dont need to unmask if it is invalid.
(http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.Panel-event-beforeaction)
Another solution could be making your own form panel. This will listen to the events: beforeaction (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.Basic-event-beforeaction) and actioncomplete (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.Panel-event-actioncomplete) and all of your other forms will extend this panel.



Ext.define('MyApp.view.BaseForm', {
extend: 'Ext.form.Panel',

initComponent: function()
{

this.addListener('beforeaction', this.doMask, this);
this.addListener('actioncomplete', this.doUnMask, this);

this.callParent(arguments);
},

doMask: function(form, action)
{
if ('submit' === action.type) {
form.owner.getEl().mask();
}
}

doUnMask: function(form, action)
{
if ('submit' === action.type) {
form.owner.getEl().unmask();
}
}

});

jasewell
5 Jun 2013, 3:02 PM
Is there a reason that passing a waitMsg config option to your form.submit() action wouldn't work?

glopes
5 Jun 2013, 10:40 PM
If your button is inside the form you could set formBind to true and if it's not, you could add a validitychange listener to the form to disable or enable your submit button according to the validity status.
This way you would be able to remove your if(form.isValid()) {**} conditional

Arg0n
5 Jun 2013, 11:03 PM
Is there a reason that passing a waitMsg config option to your form.submit() action wouldn't work?

Yes, waitMsg will display an ugly window with a gif animated loading bar. ^^