在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

回答

相關問題