Home / Programmazione / Javascript - AJAX / Inviare email con Sencha Touch
Mattepuffo

Inviare email con Sencha Touch

Inviare email con Sencha Touch

In verità non è possibile inviare email con Sencha Touch, che ricordiamo essere un framework Javscript per il mobile.

Girando lato client non ha la possibilità di accedere al sistema e inviare email.

Quello che possiamo fare, però, è impostare un form che al click richiama un file scritto in un linguaggio lato server, tipo PHP.

Cominciamo proprio da qua:

<?php

$headers = "MIME-Version: 1.0\n";
$headers .= "Content-type: text/html; charset=UTF-8\n";
$headers .= "X-Mailer: PHP\n";
$headers .= "From: YOUR_WEB_SITE\n";
$message = '<html><body>';
$message .= '<p>NOME: ' . $_POST['nome'] . '<br/>EMAIL: ' . $_POST['email'] . '<br/>MESSAGGIO: ' . $_POST['message'] . '</p >';
$message .= '</div>';
$message .= '</body></html>';
$subject = 'Email da Sencha Touch;
if (mail('your_email@gmail.com', $subject, $message, $headers)) {
    $response = array('result' => 'Email sent successfully');
} else {
    $response = array('result' => 'Error!');
}

echo json_encode($response);

Un semplice script che usa la funzione mail di PHP per inviare email, e che poi codifica la risposta in formato JSON.

Questo ci serve per leggere la risposta da Sencha Touch.

Adesso passiamo al form:

       var formContact = new Ext.form.FormPanel({
            title: 'Contact us',
            iconCls: 'contatti',
            items: [
            {
                xtype: 'fieldset',
                itemId: 'formcontact',
                items: [{
                    xtype: 'textfield',
                    name : 'nome',
                    label: 'Nome',
                    itemId: 'nome'
                },
                {
                    xtype: 'textfield',
                    name : 'email',
                    label: 'Email',
                    itemId: 'email'
                },
                {
                    xtype: 'textareafield',
                    name : 'message',
                    label: 'Message',
                    itemId: 'message'
                },
                {
                    xtype: 'toolbar',
                    docked: 'bottom',
                    layout: {
                        pack: 'center'
                    },
                    items: [{
                        xtype: 'button',
                        text: 'Send',
                        handler: function() {
                                formContact.submit({
                                    url: 'send_email.php',
                                    method: 'POST',
                                    success: function (frm, res)  {
                                        Ext.Msg.alert(res.result);
                                    },
                                    failure: function (frm, res) {
                                        Ext.Msg.alert(res.result);
                                    }
                                });
                                formContact.reset();
                        }
                    }, {
                        xtype: 'button',
                        text: 'Reset',
                        handler: function() {
                            formContact.reset();
                        }
                    }]
                }]
            }]
        });

Ho levato la parte che riguarda la validazione del form, di cui ho già parlato.

Al submit del form richiamiamo il file in PHP, impostando come metodo il POST.

Poi controlliamo se l'invio dei dati al file ha avuto successo o meno; questo controllo però riguarda solo la parte che va dal form al PHP.

Poi qua dentro, come vedete sopra, controlliamo se l'email è stata inviata con successo o meno.

La risposta del server la leggiamo con Ext.Msg.alert(res.result).

Enjoy!