Why is my Ext.form.FormPanel posting null values?

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.exampl开发者_开发技巧e.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) {  } 
        }
    }]
});

---

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.