ExtJS 4: Properly set waitMsgTarget using MVC pattern - extjs4

Question

I have extjs 4.0 controller:
Ext.define('KS.controller.DailyReport', {
extend: 'Ext.app.Controller',
views: ['report.Daily'],
init: function() {
this.control({
'dailyReport button[action=send]': {
click: this.sendDailyReport
}
});
},
sendDailyReport: function(button) {
var win = button.up('window');
form = win.down('form');
form.getForm().waitMsgTarget = form.getEl();
form.getForm().waitMsg = 'Sending...';
if (form.getForm().isValid()) { // make sure the form contains valid data before submitting
form.submit({
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
} else { // display error alert if the data is invalid
Ext.Msg.alert('Invalid Data', 'Correct them!')
}
}
});
and extjs view:
Ext.define('KS.view.report.Daily', {
extend: 'Ext.window.Window',
alias: 'widget.dailyReport',
title: 'Daily report',
layout: 'fit',
autoShow: true,
initComponent: function() {
this.items = [{
waitMsgTarget: true,
xtype: 'form',
url: 'dailyReport.php',
layout: 'fit',
waitMsgTarget: true,
waitMsg: 'Sending...',
items: [{
margin: 10,
xtype: 'datefield',
name: 'reportDate',
fieldLabel: 'Report for:',
format: 'd.m.Y.',
altFormats: 'd.m.Y|d,m,Y|m/d/Y',
value: '12.12.2011',
disabledDays: [0]
}]
}];
this.buttons = [{
text: 'Send',
action: 'send'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}];
this.callParent(arguments);
}
});
As you can see I tried to set waitMsgTarget and waitMsg in both places but it is not appearing when I click Send button.
What is wrong?

Answer 1

You are really just misusing waitMsg in the following ways:
waitMsg is not a config option of Ext.form.Basic OR Ext.form.Panel. The waitMsg must be set within your Ext.form.action.Submit. This is why setting it in the view will never work.
In your controller you are doing the same thing and setting the waitMsg as if it were a property of Ext.form.Basic.
The fix is simple. Set waitMsg in your Ext.form.action.Submit. So, just change the line(s) within form.submit() to something like:
form.submit({
waitMsg: 'Sending...',
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
//..... your other stuff here
});
and remove these lines from the controller:
form.getForm().waitMsgTarget = form.getEl();
form.getForm().waitMsg = 'Sending...';
and for completeness remove these 2 line from the view (you have waitMsgTarget in there twice):
waitMsgTarget: true,
waitMsg: 'Sending...',
NOTE: To define the waitMsgTarget to something other than the form itself you must pass in the id of the target.
For example, in your view (ie form definition) you would want to change waitMsgTarget: true to:
waitMsgTarget: 'myWindowID',
//where myWindowID is the id of the container you want to mask
For reference, see:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.action.Submit and
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic