How to prevent for double submiting form

[hudi1]

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]

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]

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]

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]

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]

and 3. when form isnt valid = too much duplicity

[Arg0n]

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]

Is there a reason that passing a waitMsg config option to your form.submit() action wouldn't work?

[glopes]

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]

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. ^^