Loading mask in sencha touch form submit

Question

I have just started building app with sencha touch 2 I was trying to submit a from that I did now I want to display a loading mask at the time of submitting form. How can I dot that? I have tried several ways didn't get success.

Ext.define('AddressBook.view.Login', {
    extend: 'Ext.form.Panel',
    xtype: 'login',
    requires: ['Ext.form.*'],
    config: {
        xtype: 'formpanel',
        title: '<img src="resources/images/logo.png" width="180px"/>  ',
        iconCls: 'user',
        layout: 'vbox',
        style: 'border:none;',
        items: [
    {
            xtype: 'fieldset',
            title: 'Service Seeker Login',
            scrolable: true,
            items: [{
                xtype: 'emailfield',
                name: 'useremail',
                placeHolder: 'Username or Email',
                allowBlank: false
            }, {xtype:'spacer',  style: 'background-color: #EEE; height:20px; border:none;'}, {
                xtype: 'passwordfield',
                name: 'password',
    placeHolder: 'Password',
                allowBlank: false
            },{xtype:'spacer',  style: 'background-color: #EEE; height:20px; border:none;'},{
            xtype: 'checkboxfield',
            name : 'Remember',
           labelWidth: '80%' ,
            label: 'Remember me',
            value: 'remember'
        }, {
                xtype: 'hiddenfield',
                name: 'type',
                value: 'user'
            }]
        }, {
            xtype: 'button',
            text: 'LOGIN',
        id: 'LoginButon',
            ui: 'confirm',
            width: '75px',
            handler: function () {
     //iniate loading screen for user
    var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
                var form = this.up('formpanel');
                var values = form.getValues();
                if (values.useremail && values.password) {
                    form.submit({
                   url: 'http://mysite/mobilelogin',
                        method: 'POST',
                        success: function (form, result) {
                            if (result.go) {
            myMask.show();
            localStorage.setItem('userName',values.useremail);
                                var indexPanel = Ext.create('AddressBook.view.Contacts');
            Ext.Viewport.add(indexPanel);
            Ext.Viewport.setActiveItem(indexPanel,{type: 'slide', direction: 'right'});
                            }
                        },
                        failure: function (form, result) {
                            Ext.Msg.alert('', result.message);
                        }
                    });
                } else {
                    Ext.Msg.alert('Error', 'Both username and password are required.');
                }
            }
        }
        }]
});

I have posted this in sencha website also. http://www.sencha.com/forum/showthread.php?190430-Simple-Form-example-with-Ajax-or-Connection-to-backend&p=851571#post851571

Answer 1

Make two methods and these are really usable. One is showPageLoadMessage and other is hidePageLoad message before sending request call show and on response received call hide use this code.

Method1

function showPageLoadMessage() {
try {
    Ext.MessageBox.show({
        msg: 'Please wait while your request is served...',
        progressText: 'Loading...',
        width: 300,
        wait: true,
        animate: true,
        waitConfig: {
            interval: 200
        }
    });
    var dlg = Ext.MessageBox.getDialog();
    dlg.center();
} catch (e) {}
}

Method2

function hidePageLoadMessage(rand) {
try {
Ext.MessageBox.hide();  
} catch (e) {}

}

I have written them in try catch block because even if something break or you call message twice by mistake your things will keep on going.

Answer 2

This is usually how I do it :

Ext.Viewport.mask({ xtype: 'loadmask' });

Ext.Ajax.request({
  ...
  success: function(response, opts) {
    Ext.Viewport.unmask();
  },
  failure: function(response, opts) {
    Ext.Viewport.unmask();
    // handle error
  }
});

Hope this helps

Answer 3

try this code

if (values.useremail && values.password) {
 Ext.Viewport.setMasked({
                      xtype: 'loadmask',
                     message: 'Loading....'
          });
                form.submit({
               url: 'http://mysite/mobilelogin',
                    method: 'POST',
                    success: function (form, result) {
                         Ext.Viewport.setMasked(false);        
                        if (result.go) {
        myMask.show();
        localStorage.setItem('userName',values.useremail);
                            var indexPanel = Ext.create('AddressBook.view.Contacts');
        Ext.Viewport.add(indexPanel);
        Ext.Viewport.setActiveItem(indexPanel,{type: 'slide', direction: 'right'});
                        }
                    },
                    failure: function (form, result) {
                       Ext.Viewport.setMasked(false);        
                        Ext.Msg.alert('', result.message);
                    }
                });
            } else {
                Ext.Msg.alert('Error', 'Both username and password are required.');
            }