Question

In my sencha-touch application, I’ve got a FormPanel that is supposed to post to my web service.

I’ve got my FormPanel laid out as follows.

var config = {
    // Url for the Web Service - Note that the WebServiceURL MUST end with a trailing "/"
    WebServiceUrl: 'http://webservice.example.com/'
};

function WebService(controller, action) {
    return(config.WebServiceUrl + controller + '/' + action);
};

rpc.views.Contact.CommunicateCard = new Ext.form.FormPanel({
    items: [{
        xtype: 'fieldset',
        id: 'loginFormSet',
        title: '',
        items: [
            {
                xtype: 'emailfield',
                placeHolder: 'Username',
                name: 'Username',
                id: 'Username',
                required: true
            }, {
                xtype: 'passwordfield',
                placeHolder: 'Password',
                name: 'Password',
                required: true
            }, {
                xtype: 'checkboxfield',
                id: 'RememberMe',
                name: 'RememberMe',
                label: 'Save login?',
                labelWidth: '40%'
            },
            {
                xtype: 'button',
                text: 'Login',
                ui: 'confirm',
                style: 'margin:2%;',
                handler: function() {
                    doLogin();
                }
            }
        ]
    }]
});


var doLogin = function () {
    Ext.Ajax.request({
        url: WebService('GetInTouch', 'CommunicateCard'),
        method: 'post',
        params: { UserName: rpc.views.Contact.CommunicateCard.getValues().Username, Password: rpc.views.Contact.CommunicateCard.getValues().Password, RememberMe: Ext.getCmp('RememberMe').isChecked() }
    });
};

The problem is that when I press “submit” and watch the post in Fiddler/Charles, I don’t see any form values. Also, when my web service receives the request, it doesn’t receive the form values either.

Here’s the HTTP Response from Charles

OPTIONS /GetInTouch/CommunicateCard HTTP/1.1
Host: webservice.example.com
Referer: http://192.168.5.206/
Access-Control-Request-Method: POST
Origin: http://192.168.5.206
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_0) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.71 Safari/534.24
Access-Control-Request-Headers: X-Requested-With, Content-Type
Accept: /
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

I’m trying to take some of my direction from here
http://mhelpdesk.com/simple-login-form-using-asp-net-mvc-and-sencha-touch/

---

as per Chrixian’s answer, I also tried the following code with the same results.

rpc.views.Contact.CommunicateCard = new Ext.form.FormPanel({
    items: [{
        xtype: 'fieldset',
        id: 'loginFormSet',
        title: '',
        items: [
            {
                xtype: 'emailfield',
                placeHolder: 'Username',
                name: 'Username',
                id: 'Username',
                required: true
            }, {
                xtype: 'passwordfield',
                placeHolder: 'Password',
                name: 'Password',
                required: true
            }, {
                xtype: 'checkboxfield',
                id: 'RememberMe',
                name: 'RememberMe',
                label: 'Save login?',
                labelWidth: '40%'
            },
            {
                xtype: 'button',
                text: 'Login',
                ui: 'confirm',
                style: 'margin:2%;'
            }
        ],
        submit: {
            url: WebService('GetInTouch', 'CommunicateCard'),
            waitMsg: 'submitting',
            success: function(form, response, responseText) {  },
            failure: function(form, response, responseText) {  } 
        }
    }]
});

Answer 1

The HTTP request you pasted isn’t POST’ing, it says “OPTIONS” for the HTTP method.

I can see nothing syntax wise that is wrong with your FormPanel and the doLogin function would indeed post the 3 pieces of information you’re defining in the params… I don’t know what you’re returning for the url in WebService('GetInTouch', 'CommunicateCard') as you didn’t post that function.

Also, while there is nothing wrong with using Ext.Ajax to submit the form, the formpanel provides a shortcut to Ext.Ajax to achieve the same thing …

rpc.views.Contact.CommunicateCard.submit({
   url: 'someurl',
   waitMsg: 'submitting',
   success: function(form, response, responseText) { ... },
   failure: function(form, response, responseText) { ... }
});

So you can let it do the heavy lifting of adding the items to the post, etc.