在 sencha touch 表单提交中加载掩码答案

【问题标题】：Loading mask in sencha touch form submit在 sencha touch 表单提交中加载掩码
【发布时间】：2012-07-09 21:29:57
【问题描述】：

我刚刚开始使用 sencha touch 2 构建应用程序我试图提交一个我现在所做的我想在提交表单时显示一个加载掩码。我怎么能点那个？我尝试了几种方法都没有成功。

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.');
                }
            }
        }
        }]
});

我也在煎茶网站上发布了这个。 http://www.sencha.com/forum/showthread.php?190430-Simple-Form-example-with-Ajax-or-Connection-to-backend&p=851571#post851571

【问题讨论】：

标签： android extjs cordova sencha-touch sencha-touch-2

【解决方案1】：

我通常是这样做的：

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

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

希望对你有帮助

【讨论】：

这对我不起作用。我在 Ajax 请求中添加了 async:false。完全没有显示掩蔽。如果我从成功/失败块中删除取消掩码，则会显示掩码。但是什么时候隐藏面具。 Sencha 中的执行顺序出了点问题？
控制台没有错误。当你输入 Ext.Viewport.mask({ xtype: 'loadmask' }); 时它没有做任何事情吗？在控制台中？

【解决方案2】：

试试这个代码

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.');
            }

【讨论】：

【解决方案3】：

制作两种方法，这些方法确实有用。一个是 showPageLoadMessage，另一个是 hidePageLoad 消息，在发送请求之前调用 show 并在收到响应时调用 hide 使用此代码。

方法1

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) {}
}

方法二

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

}

我已将它们写在 try catch 块中，因为即使发生故障或您错误地调用 message 两次，您的事情也会继续进行。

【讨论】：