Sencha Touch 2：試圖創建一個登錄表格

Question

我是一個100％新手Sencha，我正試圖重新考慮我公司的移動應用程序。

這裏是我的app.js：

Ext.application({ 
    name: 'RecruitTalkTouch', 
    views: ['Login'], 
    launch: function() { 

     Ext.Viewport.add([ 
      { xtype: 'loginview' } 
     ]); 
    } 
}); 

Login.js查看：

Ext.define('RecruitTalkTouch.view.Login', { 
    extend: 'Ext.Container', 
    alias: "widget.loginview", 
    xtype: 'loginForm', 
    id: 'loginForm', 
    requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Button' ], 
    config: { 
    title: 'Login', 
    items: [ 
     { 
     xtype: 'label', 
     html: 'Login failed. Please enter the correct credentials.', 
     itemId: 'signInFailedLabel', 
     hidden: true, 
     hideAnimation: 'fadeOut', 
     showAnimation: 'fadeIn', 
     style: 'color:#990000;margin:5px 0px;' 
     }, 
     { 
     xtype: 'fieldset', 
     title: 'Login Example', 
     items: [ 
      { 
      xtype: 'textfield', 
      placeHolder: 'Email', 
      itemId: 'userNameTextField', 
      name: 'userNameTextField', 
      required: true 
      }, 
      { 
      xtype: 'passwordfield', 
      placeHolder: 'Password', 
      itemId: 'passwordTextField', 
      name: 'passwordTextField', 
      required: true 
      } 
     ] 
     }, 
     { 
     xtype: 'button', 
     itemId: 'logInButton', 
     ui: 'action', 
     padding: '10px', 
     text: 'Log In' 
     } 
    ] 
    } 
}); 

Login.js控制器：

Ext.define('RecruitTalkTouch.controller.Login', { 
    extend: 'Ext.app.Controller', 
    config: { 
    refs: { 
     loginForm: 'loginForm' 
    }, 
    control: { 
     '#logInButton': { 
     tap: 'onSignInCommand' 
     } 
    } 
    }, 
    onSignInCommand: function(){ 
    console.log("HELLO WORLD"); 
    } 
}); 

當我點擊提交按鈕，沒有任何發生。如何連接我的提交按鈕以偵聽事件（點擊，點擊等），並將信息提交給後端API？

Answer 1

您必須通過將其添加到您的應用程序類的controllers選項來激活您的控制器。

然後，要將您的數據提交到後端，您有幾個選項。您可以使用form panel而不是原始容器，並使用其submit方法。或者，您可以使用Ext.Ajax單身人士。在這種情況下，您必須自己構建有效負載。最後，您可以使用已配置的代理創建模型，並使用其方法save。最後一種方式可能是長期可維護性最好的方法......即使在簡單登錄表單的情況下，這可能有點矯枉過正。

Answer 2

在應用程序的app.js文件，添加：

controllers: [ 
     'Login' 
    ] 

在你的應用程序類。對於提交信息，請調用如下的Ajax請求：

Ext.Ajax.request({ 
      url: // api url.., 
      method: 'POST', 
      params: { 
       username: // get user name from form and put here, 
       password: // get password and ... 
      }, 
      success: function(response) { 
       do something... 
      }, 
      failure: function(err) {do ..} 
     }); 

fromSignInCommand（）函數內部。

Answer 3

你可以參考這個示例應用程序來創建登錄表單。它非常簡單的應用程序，請通過它。 http://miamicoder.com/2012/adding-a-login-screen-to-a-sencha-touch-application/