Usare i form con Sencha Touch

Proseguiamo con Sencha Touch e i suoi componenti.

Oggi vediamo come usare i form.

Non terremo in considerazione validazione cose del genere, ma solo un uso basilare.

Per prima cosa preprate un file PHP (o di altro linguaggio lato server) da contattare al submit del form.

Ricordo che Sencha Touch è Javascript driven e quindi per svolgere determinate operazione (invio email, iscrizione, ecc....) richiede l'uso di file lato server.

Per fare un esempio un pò più completo ho pensato di usare subito un file lato server:

// test.php

<?php

$response = array('result' => $_POST['nome']);

echo json_encode($response);

La risposta che il file invierà sarà in formato JSON e sarà il nome inserito nella textfield.

A questo punto passiamo al codice JS:

Ext.setup({
    name: 'MY APP',
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {
        
        var formContact = new Ext.form.FormPanel({
            title: 'Contact me',
            items: [{
                xtype: 'fieldset',
                itemId: 'formcontact',
                items: [{
                    xtype: 'textfield',
                    name : 'nome',
                    label: 'Nome',
                    itemId: 'nome'
                },
                {
                    xtype: 'toolbar',
                    docked: 'bottom',
                    layout: {
                        pack: 'center'
                    },
                    items: [{
                        xtype: 'button',
                        text: 'Send',
                        handler: function() {
                            formContact.submit({
                                url: 'test.php',
                                method: 'POST',
                                success: function (frm, res)  {
                                    alert(res.result);
                                },
                                failure: function (frm, res) {
                                    alert('ERROR');
                                }
                            })
                        }
                    },
                    {
                        xtype: 'button',
                        text: 'Reset',
                        handler: function() {
                            formContact.reset();
                        }
                    }]
                }]
            }]
        });
    }
});

Istanziamo un oggetto di tipo Ext.form.FormPanel.

Come items principali abbiamo solo una textfield per il nome e una toolbar dove dentro piazziamo due bottoni (uno per l'invio e uno per il reset del form).

Sulla textfield penso non ci sia molto da dire.

Invece guardiamo i due bottoni.

Il primo serve per il submit, e gli ho impostato un handler per quando lo si spinge.

Quando viene cliccato viene richiamata la funzione submit() sul form.

Nel submit gli impostiamo alcune opzioni.

La prima è l'url del file PHP da contattare.

Il seondo è il metodo di submit (POST o GET).

Infine ci facciamo restituire una risposta sia in caso di successo che in caso di fallimento.

Nel primo caso guardate bene la riga alert:

alert(res.result)

Il result corrisponde alla chiave che ci viene data dalla risposta JSON (riguardate il file PHP).

Nel file PHP ho anche messo $_POST['nome'], che ovviamente deve corrispondere al parametro name della textfield.

Può sembrare complicato o "strano", ma a noi basta mettere le corrispondenze giuste; ci pensa Sencha a fare i vari passaggi di valore.

Nel secondo bottone mettiamo semplicemente un formContact.reset(), che altro non fa svuotare tutti i campi del form in automatico.

La cosa più complicata del tutorial può essere il passaggio dei dati.

Il consiglio è quello di controllare le corrispondenze tra la risposta JSON e il nome dei campi.