Best way to send an email from Sencha Touch

[rockinthesixstring]

I've got an email form in my ST application, and I'd like to post the data to my WebService (written in ASP.NET MVC), which I can then send via Email to our administration.

What is the best way to post data to a web service in Sencha Touch?

I'm pretty sure I can't send a "model object" to my web service, but I 'm wondering if I can post the form, or if I have to submit JSON.

I'm open to either way, but I'm pretty new to ST and Javascript in general, so any guidance will be greatly appreciated.

[Zdeno]

I think email "client" is nothing else then FormPanel. So simply do getData() when you tap Sent button. Its basic way.. i think someone can tell you another method

getData: function() {
    var postData = {};
    ...
    postData.receiver        = this.sendTo.getValue();
    postData.subject         = this.subjectField.getValue();
    postData.description   = this.description.getValue();
    ...
    return postData;
}

[rockinthesixstring]

I'm sorry, I'm not sure I follow exactly.

Here's what I have currently.

var _communicateCardFormItems = [{
    xtype: 'textfield',
    name: 'name',
    label: 'Name',
    placeHolder: 'John Smith',
    autoCapitalize: true,
    required: true,
    useClearIcon: true
}, {
    xtype: 'textfield',
    name: 'address',
    label: 'Address',
    useClearIcon: true
}, {
    xtype: 'textfield',
    name: 'city',
    label: 'City',
    placeHolder: 'Calgary',
    useClearIcon: true
}, {
    xtype: 'textfield',
    name: 'postalcode',
    label: 'Postal Code',
    useClearIcon: true
}, {
    xtype: 'textfield',
    name: 'phone',
    label: 'Phone'
}, {
    xtype: 'emailfield',
    name: 'email',
    label: 'Email'
}, {
    xtype: 'checkboxfield',
    name: 'updateinfo',
    label: 'Update my info',
    labelWidth: '80%',
    cls: "rpc-checkbox"
}, {
    xtype: 'checkboxfield',
    name: 'churchdirectory',
    label: 'Include info in the church directory',
    labelWidth: '80%',
    cls: "rpc-checkbox"
}, {
    xtype: 'checkboxfield',
    name: 'newchristian',
    label: 'I asked Jesus to come into my life!',
    labelWidth: '80%',
    cls: "rpc-checkbox"
}, {
    xtype: 'checkboxfield',
    name: 'becomechristian',
    label: 'I want to become a Christian',
    labelWidth: '80%',
    cls: "rpc-checkbox"
}, {
    xtype: 'fieldset',
    defaults: { xtype: 'radiofield', labelWidth: '80%' },
    title: 'I am',
    items: [{
        name: 'maritalstatus',
        label: 'married',
        value: 'married'
    }, {
        name: 'maritalstatus',
        label: 'Senior (65+)',
        value: 'senior'
    }, {
        name: 'maritalstatus',
        label: 'Single Parent',
        value: 'single parent'
    }, {
        name: 'maritalstatus',
        label: 'Single Adult (30+)',
        value: 'Single Adult'
    }, {
        name: 'maritalstatus',
        label: 'Teen (13-17)',
        value: 'Teen'
    }, {
        name: 'maritalstatus',
        label: 'Young Adult (18-29)',
        value: 'Young Adult'
    }]
}];

rpc.views.Contact.CommunicateCard = {
    title: 'Communicate Card',
    xtype: 'form',
    id: 'rpc-views-contact-communicatecard',
    scroll: 'vertical',
    fullscreen: true,
    standardSubmit: true,
    items: [{
        xtype: 'fieldset',
        title: 'Communicate Card',
        instructions: config.CommunicateCardInstructions,
        defaults: {
            // labelAlign: 'right'
            labelWidth: '40%'
        },
        items: _communicateCardFormItems
    }, {
        layout: 'vbox',
        defaults: { xtype: 'button', flex: 1, style: 'margin: 0em;' },
        items: [{
            text: 'Submit',
            handler: function () {
                Ext.getCmp('rpc-views-contact-communicatecard').submit();
            }
        }]
    }]
};

I'd like to post it directly as a form since I can then create a PostModel on my WebService and use the default Model Binder to manipulate the data.

[Zdeno]

I think you cant do it with simply formpanel because it used rawdata for post request ( If im not blind ). Use own ajax request instead and define xmlData property in.

Original post request in FormPanel

...
return Ext.Ajax.request({
                url     : options.url,
                method  : options.method,
                rawData : Ext.urlEncode(Ext.apply(
                    Ext.apply({}, this.baseParams || {}),
                    options.params || {},
                    formValues
                )),
...

Everything what you need find in Connection.js:

...
// check for xml or json data, and make sure json data is encoded
            data = o.rawData || o.xmlData || o.jsonData || null;
            if (o.jsonData && !Ext.isPrimitive(o.jsonData)) {
                data = Ext.encode(data);
            }
...
           if (!headers['Content-Type'] && (data || params)) {
                var contentType = me.defaultPostHeader,
                    jsonData    = o.jsonData,
                    xmlData     = o.xmlData;
                
                if (data) {
                    if (o.rawData) {
                        contentType = 'text/plain';
                    } else {
                        if (xmlData && Ext.isDefined(xmlData)) {
                            contentType = 'text/xml';
                        } else if (jsonData && Ext.isDefined(jsonData)) {
                            contentType = 'application/json';
                        }
                    }
                }
                headers['Content-Type'] = contentType;
...