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.

Vi metto tutta l'applicazione e sotto ve la spiego:

Ext.setup({
    name: 'MYAPP',
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {
        
        // MODEL
        Ext.define('Articoli', {
            extend: 'Ext.data.Model',
            config: {
                fields: ['id','title']
            }
        });
        
        Ext.define('Articolo', {
            extend: 'Ext.data.Model',
            config: {
                fields: ['id','title','introtext','fulltext']
            }
        });
        
        var myView = new Ext.navigation.View({
            fullscreen: true,
            items: [
            {
                title: 'MY VIEW',
                xtype: 'list',
                store: new Ext.data.Store({
                    model: 'Articoli',
                    proxy: {
                        type: 'ajax',
                        url: 'articoli.php',
                        reader: {
                            type: 'json',
                            root: 'title'
                        }
                    },     
                    autoLoad: true  
                }),
                itemTpl: '{title}',
                listeners: {
                    select: function(view, record) {
                        myView.push({
                            xtype: 'list',
                            store: new Ext.data.Store({
                                model: 'Articolo',
                                proxy: {
                                    type: 'ajax',
                                    url: 'articolo.php?id=' + record.get('id'),
                                    reader: {
                                        type: 'json',
                                        root: 'title'
                                    }
                                },
                                autoLoad: true
                            }),
                            itemTpl: '{title}<hr/>{fulltext}'
                        })
                    }
                }
            }
            ]
        });
    }
});

Allora, prima creiamo due regModel che rappresentano i modelli di dati che esportiamo.

Il primo per la lista degli articoli, il secondo per l'articolo singolo.

Questi modelli verranno richiamati più sotto prendendo direttamente il nome (Articoli e Articolo).

Poi istanziamo una Ext.navigation.View con un unico items che la lista (xytpe list).

Nella lista indichiamo prma lo store, cioè il contenitore con i dati, istanziando un nuovo new Ext.data.Store.

Allo store impostiamo il model Articoli, e sotto impostiamo la connessione (proxy), indicando il tipo, l'url (il file PHP) e che i dati sono in formato JSON.

Ancora più sotto indichiamo l'itemTpl, che è la modalita con cu irappresentiamo i dati; in questo caso ho solo indicato tra parentesi graffe il nome del campo del modello che voglio visualizzare (modello Articoli, fields title).

Poi ho impostato un listener che ci serve per quando clicchiamo su una riga.

Quando clicchiamo usiamo il metodo push sulla nostra view in modo da cambiare pagina (in alto comparirà il tasto Back).

Poi non facciam oaltro che ripetere quanto sopra.

Cambino l'url del file (quello per l'articolo singolo al quale passiamo l'id del record selezionato), il model (Articolo, quello per il record singolo), e l'itemTpl (che adesso mostra sia il title che fulltext, il secondo fields di Articolo).

Vista che così è più difficile da spiegare che da fare.

Provate, fate dei cambiamenti in modo da capire bene.

Il concetto però è questo: abbiamo un modello che serve da contenitore per i dati; abbiamo uno store che prende i dati in formato JSON da un file PHP che interroga il database; un template (itemTpl) che ci permette di visualizzare i dati (volendo lo possiamo mischiare con l'HTML personalizzato e impostare dello stile).

Insomma un pò di MVC.