Question

我是Sencha的100％新手，我正试图重新考虑我公司的移动应用程序。

这是我的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

在应用程序的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（）函数。

Answer 2

您必须通过将控制器添加到应用程序类的controllers选项来激活控制器。

然后，要将数据提交到后端，您有几个选择。您可以使用form panel代替原始容器，并使用其submit方法。或者，您可以使用Ext.Ajax单例。在这种情况下，您必须自己构建有效负载。最后，您可以使用已配置的代理创建模型，并使用其save方法。最后一种方式可能是长期可维护性的最佳方式......即使在简单登录表单的情况下，这可能有点过分。

Answer 3

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

Sencha Touch 2：尝试创建登录表单

3 个答案: