1

我是 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？

4

3 回答 3

3

在应用程序的 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 ..}
        });

从 onSignInCommand() 函数内部。

于 2013-10-31T06:39:46.337 回答
0

You must activate your controller by adding it to the controllers option of your application class.

Then, to submit your data to the backend, you've got several options. You can use a form panel instead of your raw container, and use its submit method. Alternatively, you can use the Ext.Ajax singleton. In this case, you'll have to build the payload yourself. Finally, you can create a model with a configured proxy, and use its save method. This last way is probably the best for long term maintainability... Even if in the case of a simple login form, that may be a little bit overkill.

于 2013-10-30T09:49:21.747 回答
0

您能否参考此示例应用程序来创建登录表单。它非常简单的应用程序请通过它。 http://miamicoder.com/2012/adding-a-login-screen-to-a-sencha-touch-application/

于 2013-10-31T13:09:44.143 回答