PDA

View Full Version : Best way to send an email from Sencha Touch



rockinthesixstring
8 Aug 2011, 12:47 PM
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
8 Aug 2011, 1:34 PM
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
8 Aug 2011, 2:55 PM
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
8 Aug 2011, 4:06 PM
I think you cant do it with simply formpanel because it used rawdata for post request ( If im not blind B)). 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;
...