ExtJs – Integrazione tra PHP e ExtJS con JSON

ExtJs (oggi Sencha) è uno dei principali framework javascript attualmente disponibili: è potente, flessibile, cross-platform, ed è probabilmente uno degli strumenti più veloci per realizzare rich internet applications. In questo articolo vedremo i concetti principali che permettono di integrare ExtJs in una web application PHP-based attraverso il protocollo JSON.

JSON (JavaScript Object Notation) è un formato di interscambio dati: è molto leggero e semplice da scrivere e leggere per l’uomo. E’ un formato testuale completamente indipendente, che segue poche semplici convenzioni familiari ad esempio a chi programma in Java, Javascript, Perl, ecc. Per ulteriori informazioni è disponibile il sito di riferimento.

ExtJs permette con poche righe di codice di creare finestre, griglie, grafici, layout complessi, e molto altro ancora. Per gestire la maggior parte delle strutture complesse come ad esempio le griglie o i grafici, ExtJs utilizza il concetto di “store”. Lo store possiamo immaginarlo come una sorta di database locale, nel quale vengono memorizzati tutti i dati principali: come quelli da rappresentare e quelli relativi alla struttura grafica. Lo store è la sorgente dei dati, il luogo da dove provengono i dati che popolano questi oggetti complessi: è qui dunque, nello store, che dobbiamo inserire i dati da dare in pasto a ExtJs per la rappresentazione.

Il ciclo che avviene è sostanzialmente questo:

1. Attraverso PHP recuperiamo i dati ad esempio dal database
2. Manipoliamo questi dati in modo da renderli leggibili e scrivibili nello store di ExtJs
3. Utilizziamo JSON per passare i dati a ExtJs
4. ExtJs visualizzerà i dati in questione

Supponiamo dunque di partire con una variabile PHP in cui è contenuto il result set di una query:


$result = mysql_query($query);
$data = array();
while ( $row = mysql_fetch_assoc($result) ) {
array_push( $data, array(
'recordID' => $row['Id'],
'titolo' => $row['titolo'],
'descrizione' => $row['descrizione'],
));
}
$store = json_encode($data);


In questo codice c’è il cuore del funzionamento di questo meccanismo. “$data” rappresenta i dati preparati, quelli che verranno inseriti nello store e rappresentati da ExtJs. Come vengono preparati questi dati? Nella prima riga di codice recuperiamo il result set dei dati che vogliamo rappresentare e lo salviamo nella variabile “$resultset”.

Eseguiamo poi un ciclo, nel quale per ogni record del result set creiamo un array con i dati di ogni record, nello specifico un array associativo. Attenzione: questo è un punto fondamentale. Le chiavi dell’array associativo devono corrispondere a quelle che caratterizzato la struttura dello store, come vedremo tra un attimo.

L’ultima riga di codice crea la stringa JSON che potrà essere data in pasto allo store di ExtJs, stringa che viene creata attraverso la funzione di PHP json_encode(), disponibile nelle estensioni ufficiali (PECL).

Veniamo alla definizione dello store. Prendiamo un esempio tra i tanti disponibili sul sito ufficiale di ExtJs; come possiamo vedere nel codice sorgente della pagina, lo store per il pannello del grafico è così definito:

var store = new Ext.data.JsonStore({
fields:['id', 'titolo', 'descrizione],
data: [
{name:'Jul 07', visits: 245000, views: 3000000},
{name:'Aug 07', visits: 240000, views: 3500000},
{name:'Sep 07', visits: 355000, views: 4000000},
{name:'Oct 07', visits: 375000, views: 4200000},
{name:'Nov 07', visits: 490000, views: 4500000},
{name:'Dec 07', visits: 495000, views: 5800000},
{name:'Jan 08', visits: 520000, views: 6000000},
{name:'Feb 08', visits: 620000, views: 7500000}
]
});

Noi però vogliamo che i dati siano generati dinamicamente, dunque apportiamo la seguente modifica:

var store = new Ext.data.JsonStore({
fields:['id', 'titolo', 'descrizione],
data: < ?php echo $store; ? >
});

Come ho indicato poc’anzi, i campi che definiscono lo store sono uguali alle chiavi dell’array associativo che ho creato nei passi precedenti. In questo modo è possibile creare le associazioni tra i campi dello store e i valori che abbiamo recuperato dal database.

Abbiamo visto come creare un collegamento tra PHP e ExtJs attraverso JSON: questo meccanismo vale per tutti i componenti complessi di ExtJs, ovvero quelli che sono predisposti per ricevere dati attraverso un flusso JSON.