在sencha touch form中加载蒙版submit

我刚刚开始用sencha touch 2构建应用程序我试图提交一个我现在做的，我想在提交表单时显示加载蒙版。我怎么能点那个？我尝试了几种方法没有获得成功。在sencha touch form中加载蒙版submit

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

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

来源

2012-07-10 atluriajith

这通常是我如何做到这一点：

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

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

希望这有助于

来源

2012-07-10 14:21:32

非常感谢你..它的工作。 :) – atluriajith 2012-07-11 05:13:29

这不适合我。我在Ajax请求中添加了async：false。完全没有显示掩蔽。如果我从成功/失败块中删除了unmask，则会显示掩码。但是什么时候隐藏面具。 Sencha的执行顺序有问题吗？ – nkongara 2013-01-18 15:19:10

控制台中没有错误。当你输入Ext.Viewport.mask（{xtype：'loadmask'}）;在控制台中？ – 2013-01-18 15:49:22

试试这个代码

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

来源

2012-07-10 13:40:25

使两种方法，这些都是真正可用。一个是showPageLoadMessage，另一个是在发送请求调用show之前的hidePageLoad消息，并且在接收到的响应调用hide之后使用此代码。

方法一

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

方法2

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

}

我已经写了他们在try catch块，因为即使一些突破或者您错误地调用消息两次你的东西会继续去。

来源

2012-07-10 21:11:55 Riz

在sencha touch form中加载蒙版submit

回答

相关问题