Question

I am very new to sencha-touch & started to build simple Login form.
My UI is ready but now I am stuck on how to write code for login request response.

As important, how can I point to specific url to make POST/GET request?

Also how to get & parse the json data.?

I read the sench-touch documentation but I didnt understood, how to use that model, store, proxy.
Suggestions upon how to create model, store, proxy to make simple login are very helpful.

Thanks in advance.

Edited to insert image:

var loginForm = Ext.create('Ext.form.Panel', {
    fullscreen: true,

    items: [{
        xtype: 'fieldset',
        items: [
            {
                xtype: 'textfield',
                name : 'name',
                label: 'Username'
            },
            {
                xtype: 'passwordfield',
                name : 'password',
                label: 'Password'
            }
        ]
    }]
});

loginForm.add({
                xtype: 'button',
                text: 'Login',
                ui: 'confirm',
                badgeText: '1',
                // handler: function(){
                    // // alert("handler invoked");
                // },

                listeners : {
                tap : function() {

                var form = Ext.getCmp('form-id');
                var values = form.getValues();
                Ext.Ajax.request({
                      url: 'https://102.XXX.X.XX:XXXX/QuizMasterServer/rest/login',
                      params: values,

                      success: function(response){
                          var text = response.responseText;
                          Ext.Msg.alert('Success', text);
                     },

                     failure : function(response) {
                           Ext.Msg.alert('Error','Error while submitting the form');
                           console.log(response.responseText);
                     }
              });
}
}
});



loginForm.add({
    xtype: 'toolbar',

    // id:'loginPressed',

    docked: 'bottom',
    // layout: { pack: 'center' },
    items: [
        {
            xtype: 'button',
            text: 'Login',
            ui: 'confirm',
            // action: 'login',

            handler: function() {
                loginForm.setValues({
                    name: 'vs',
                    password: 'vs'
                })
            }
        },
        {
            xtype: 'button',
            text: 'Clear',
            ui:'decline',
            handler: function() {
                loginForm.reset();
            }
        },

        {
            xtype: 'button',
            centered: true,
            text: 'Sign Up',
            handler: function() {
                alert('New User?');
            }
        },
        {
            xtype: 'container',
            html: 'New User? ',
            style: {
                color: 'yellow',
            }
        },
    ]
});

Answer 1

You are almost there!

add your code to the success callback.
Note, success() callback if fired if ajax returns ok, otherwise failure(). Callback callback() fire in both cases.

Ext.Ajax.request({
    url: 'https://102.XXX.X.XX:XXXX/QuizMasterServer/rest/login',
    params: values,

    success: function(response){
        var text = response.responseText;
        // for example
        var result = Ext.decode(text);  // json parsing
        if (result.ok) {
            //create new widget
            var homeView = Ext.widget('homePage', {...});
            Ext.Viewport.remove(formLogin);
            Ext.Viewport.add(homeView);
            ///... etc
            homeView.show()
        }
        Ext.Msg.alert('Success', text);
    },

    failure : function(response) {
        Ext.Msg.alert('Error','Error while submitting the form');
        console.log(response.responseText);
    }
});

Disclaimer. Of course the code is not tested…

cheers, Oleg