Impostare le icone in Sencha TabPanel

Sencha TabPanel permette di impostare le icone alle varie voci che si impostano.

Di default ce ne stanno parecchie da usare, e le trovate in /resources/themes/images/default/pictos/.

Solo alcune però sono già inserite nel CSS (fatto con SASS se non sbaglio) e quindi può che ne impostiate alcune senza poi visualizzarla.

Ad esempio ho messo questa in un FormPanel ma non compariva:

iconCls: 'chat'

Per usare anche le altre icone bisogna fare una modifica al CSS; io vi consiglio di creare un CSS a parte e poi richiamarlo nell'index.

Validazione form in Sencha touch

In un precedente articolo abbiamo visto come creare un form con Sencha touch.

Oggi vediamo come mettere in piedi un basilare sistema di validazione.

Il form ha tre campi:

• nome
• email
• messaggio

Tutti e tre sono obbligatori e l'email deve essere anche formalmente corretta.

Questo il nostro form:

var formContact = new Ext.form.FormPanel({
            title: 'My Form',
            items: [{
                xtype: 'fieldset',
                itemId: 'formcontact',
                items: [{
                    xtype: 'textfield',
                    name : 'nome',
                    label: 'Nome',
                    itemId: 'nome'
                },
                {
                    xtype: 'textfield',
                    name : 'email',
                    label: 'Your 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() {

                        }
                    },
                    {
                        xtype: 'button',
                        text: 'Reset',
                        handler: function() {
                            formContact.reset();
                        }
                    }]
                }]
            }]
        });

Importante è il parametro itemId, che ci serverà per riconoscerlo dentro la pagina e prenderne il valore.

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.