sencha touch

Mattepuffo's logo
Impostare le icone in Sencha TabPanel

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.

Mattepuffo's logo
Google Maps con Sencha Touch

Google Maps con Sencha Touch

Anche nelle applicazioni mobile (per non dire sopprattutto) è diventato obbligatorio integrare una servizio di geolocalizzazione / mappa.

Ad oggi quello più usato rimane Google Maps, e noi oggi vedremo come integrarlo in una app creata con Sencha Touch 2.

La prima cosa da fare è richiamare il servizio; quindi aprite il file index.html (quello dove richiamate anche i CSS e Sencha) e mettete questo:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

In sostanza richiamiamo le librerie di Google Maps, e questo richiede una connessione a internet.

Mattepuffo's logo
Sencha touch image Carousel

Sencha touch image Carousel

Proseguiamo con lo studio di Sencha touch con il componente Carousel.

Questo componente permette di mettere in un componente padre un tot di elementi da scrorrere con il dito.

Una spece di slider insomma.

Noi useremo questo componente per creare una galleria di immagini.

Il primo pezzo consiste nello scandagliare la nostra directory e salvare tutto in un array:

       // IMAGES
        var imgsAdv = [];
        for (var j = 1; j < 19; j++) {
            imgsAdv.push({
                xtype: 'image',
                src: 'directory/' + j + '.png'
            });
        }

Come vedete nell'array salviamo diversi componenti di tipo image.

Mattepuffo's logo
Validazione form in Sencha touch

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.

Mattepuffo's logo
Sencha Touch List da MySQL

Sencha Touch List da MySQL

Seguendo la segnalazione di Ivan (leggi i commenti) ho cambiato i Model in modo da non usare metodi deprecati.

Un ringraziamento a Ivan per la segnalazione.

 

Facciamo un passo avanti con Sencha Touch.

Oggi vediamo il componente List.

Innanzitutto vi ricordo il link di riferimento: clicca qua.

Se cliccate su List vi verranno presentati già degli esempi di partenza.

Quello che faremo noi è caricare i dati prendendoli da MySQL.

La prima cosa da fare è preparare un file in un linguaggio lato server per interrogare il db.

Io lo faccio in PHP:

<?php

$host = "";
$user = "";
$pass = "";
$db = "";
$conn = mysqli_connect($host, $user, $pass, $db) or die(mysqli_connect_error());
if (mysqli_connect_errno()) {
    echo "Connessione fallita: " . die(mysqli_connect_error());
}
$result = mysqli_query($conn, "SELECT * FROM j25_content ORDER BY created DESC LIMIT 20");
$rows = array();
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
    $rows[] = array(
        'id' => $row['id'],
        'title' => $row['title'],
    );
}
echo json_encode($rows);
mysqli_close($conn);

L'output è in formato JSON e dalla tabella tiro fuori due campi.

Poi preperiamone un altro per estrarre un recordo singolo; dopo capirete il perchè:

<?php

$host = "";
$user = "";
$pass = "";
$db = "";
$conn = mysqli_connect($host, $user, $pass, $db) or die(mysqli_connect_error());
$cmd = "SELECT * FROM j25_content WHERE id = " . $_GET['id'];
if (mysqli_connect_errno()) {
    echo "Connessione fallita: " . die(mysqli_connect_error());
}
$result = mysqli_query($conn, $cmd);
$rows = array();
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
    $rows[] = array(
        'title' => $row['title'],
        'fulltext' => utf8_encode($row['fulltext'])
    );
}
echo json_encode($rows);
mysqli_close($conn);

La List la metteremo in una View in modo che quando cliccheremo su una riga andiamo a vederne il dettaglio.