CODEWITHSUNDEEP
extjs4extjs-mvc
Milan
Milan

Reputation: 1019

ExtJS 4: Properly set waitMsgTarget using MVC pattern

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?

Upvotes: 0

Views: 3170

Answers (1)

LittleTreeX
LittleTreeX

Reputation: 1239

You are really just misusing waitMsg in the following ways:

  1. 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.
  2. 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

Upvotes: 2

Related Questions