Question

I am creating login system with Sencha Touch 2. I am getting an issue while submitting my form. It is not getting response data from server. Below is my code

Controller:

Ext.define("MyMobile.controller.LoginController", {
extend: "Ext.app.Controller",
views: ['LoginView'],

config: {
    refs: {
        loginForm: "#loginFormPanel"
    },
    control: {
        'button[action=login]': {
            tap: "authenticateUser"
        }
    }
},

authenticateUser: function (button) {

    this.getLoginForm().submit({
        url: 'login/authenticate',
        method: 'POST',
        success: function (form, result) {
            debugger; //This block of code is not executing even after JSON response
            var jsonoutput = Ext.decode(result);  // json parsing
            Ext.MessageBox.alert('Error', "Success");

        },
        failure: function (form, result) {//This block of code is not executing even after JSON response
            Ext.MessageBox.alert('Error', "Invalid username/password");
        }

    });
}

});

View

Ext.define("MyMobile.view.LoginView", {
extend: "Ext.form.FormPanel",
alias: "widget.mylogin",
id: 'loginFormPanel',

config: {

    margin: '0 auto',
    name: 'loginform',
    frame: true,
    url: 'login/Authenticate',
    title: 'Login',
    items: [
      {
      xtype: 'fieldset',

      itemId: 'LoginFieldset',
      margin: '10 auto 0 auto ',

      title: '',
      items: [
                {
                    xtype: 'textfield',

                    label: 'User Name',
                    name: 'my-username',
                    required: true,

                    placeHolder: 'Username'
                },
                {
                    xtype: 'emailfield',
                    label: 'Email',
                    name: 'Email'
                },
                {
                    xtype: 'passwordfield',

                    label: 'Password',
                    name: 'my-password',
                    required: true,

                    placeHolder: 'Password'
                }
            ]
  },
    {
        xtype: 'button',
        id: 'loginButton',
        margin: '25 auto 0 auto ',
        style: '',
        maxWidth: 200,
        ui: 'action',
        width: '',
        iconCls: 'user',
        iconMask: true,
        text: 'Login',
        action: 'login'
    }

    ]
}

 });

App.JS

Ext.application({

name: "MyMobile",
appFolder: "myapp",
controllers: ["LoginController"],
views: ['LoginView'],

launch: function () {

   var loginPanel= Ext.create('Ext.Panel', {
        layout: 'fit',

        items: [
            {
                xtype: 'mylogin'
            }
        ]
    });


    Ext.Viewport.add(loginPanel);
}

});

Can some one could figure out what should be the problem?

Below was the JSON response i am getting from server.

{“UserName”:”Murali”,”isAdmin”:true,”isAuthenticated”:true}

Even after getting a JSON and 200 ok result, my code form submit function goes into failure callback. In failure call back function failure:function(form,result) i am getting result param as my JSON. But why it is in failure?

Answer 1

Make your server return a JSON response like below:

If success:

{
    "success":true,
    "UserName":"Murali",
    "isAdmin":true,
    "isAuthenticated":true
}

If failure:

{
    "success":false
}

Read more here: http://docs.sencha.com/touch/2-0/#!/api/Ext.form.Panel-method-submit