ExtJs: Image Gallery con Ext.DataView

In quest'articolo realizzeremo una galleria di immagini con Extjs framework, sfruttando la classe Ext.DataView.

Ext.DataView consente di realizzare un meccanismo per la visualizzazione di immagini, con modelli di layout personalizzati per rendere ancor più accattivante l'aspetto della nostra applicazione.

L'oggetto Ext.DataView viene supportato dall'Ext.XTemplate, una classe che permette di creare template per impaginare i dati in grado di reindirizzare codice html all'interno di un ExtJs container, per maggiori dettagli rimando alle rimando alle API. Torna a far parte dell'architettura completa il componente "store" incontrato nel precedente articolo, utilizzato qui come contenitore delle immagini visualizzate all'interno della galleria. Viene definito lato client ed alimentato in server-side, fornendo un'interfaccia tra la image-gallery e la directory in cui inseriamo i file jpg/png/gif da caricare.

Dopo questa breve panoramica, siamo pronti ad analizzare da vicino il codice da sviluppare, soffermandoci sulle parti salienti del sorgente:

var store = new Ext.data.JsonStore({
	    url: 'get-images.PHP',
	    root: 'images',
	    totalProperty: 'result',
	    fields: [ 		'name', 'url'
	    ]
}); store.load();

Istanziato il magazzino, configuriamo l'oggetto, settando la proprietà url con l'indirizzo dello script in grado di accedere al db e caricare le immagini, la root è il punto di accesso durante la lettura delle informazioni,  totalProperty è il valore del numero totale di immagini caricate, ed infine l'array fields definisce la struttura semantica dello store.

var tpl = new Ext.XTemplate(
   '<tpl for=".">',
   '<div class="thumb-wrap" id="{name}">',
   '<div class="thumb"><img src="{url}" title="{name}"></div>',
   <span class="x-editable">{shortName}</span></div>',
   '</tpl>',
   '<div class="x-clear"></div>');

La classe Ext.Xtemplate supporta funzionalità avanzate come:

• il riempimento automatico di array utilizzando i template ed i sub-template
• l'elaborazione di operazioni condizionali tramite operatori di confronto.

Il tag tpl e l'operatore for vengono utilizzati per processare i dati forniti, permettendoci di definire l'aspetto grafico che visualizzerà l'utente all'interno della Ext.DataView.

var pagingbar = new Ext.PagingToolbar({
      style: 'border:1px solid #99BBE8;',
	  store: store,
	  pageSize: 5,
	  displayInfo: true
	  });

Entra a far parte di questa applicazione anche la Ext.PagingToolbar,  una classe che incontreremo spesso nei nostri progetti, che in contatto diretto con lo store regola il numero di items reindirizzati in un contenitore (proprietà PageSize), valorizziamo anche l'attributo displayInfo a "true" per ottenere  un messaggio nella barra che ci indica lo status di caricamento dei dati.

var datav = new Ext.DataView({
       autoScroll: true,
	   store: store,
	   tpl: tpl,
	   autoHeight: false,
	   height: 130,
	   singleSelect: true,
	   overClass: 'x-view-over',
	   emptyText: 'No images to display',
	   style: 'border:1px solid #99BBE8; border-top-width: 0;',
	   listeners: {
	      click: {
		    fn: function() {
			   var selNode = datav.getSelectedRecords();
			   var win = new Ext.Window({
			         title: selNode[0].data.name,
					 width: 500, height: 400,
					 items : [{ xtype : 'panel', layout : 'column',
					            html: '<img src="'+selNode[0].data.url+'" width="500" height="400"/></img>'}]
	           });
			   win.show();
			}
		  }
	   }
});

La struttura è ben delineata e ci offre la possibilità di lavorare su compartimenti stagni senza correre il rischio di effettuare modifiche che compromettano il funzionamento dell'applicazione.

Le principali opzioni di configurazione della classe Ext.DataView sono:

Termine	Descrizione
autoScroll	"true" per abilitare la barra di scorrimento laterale
store	fornisce alla galleria il magazzino di immagini
tpl	definizione del template di supporto
autoHeight	"false" per impedire che l'altezza vienga ricalcolata
height	valore in pixel che definisce l'altezza del contenitore immagini
singleSelect	"true" per selezionare una singola immagine alla volta dalla galleria
overClass	classe css attiva al passaggio del mouse
emptyText	messaggio visualizzato quando lo store è vuoto
style	formattazione "inline" della grafica tramite codice css

A questo punto installiamo il listeners in ascolto sull'evento click, un helper contenente uno o più gestori di eventi da aggiungere durante la sua configurazione, che ci consente di intercettare la selezione del record nella galleria. In alternativa potremmo gestire l'evento dblclick o magari aggiungerlo per creare una nuova azione.

L'evento click lancia la funzione fn in cui lavoriamo con il metodo getSelectedRecords(). Come ritorno abbiamo un oggetto di tipo Ext.data.Model con i record selezionati, per ottenere una corrispondenza con il dato da cui prelevare la url ed il nome dell'immagine da ingrandire.

Istanziamo la classe Ext.Window e come titolo della window impostiamo il valore a della proprietà data nell'oggetto selNode all'indice [0] in questo modo:

title = selNode[0].data.name

In conclusione includiamo nella finestra un pannello in cui richiamare l'immagine per mezzo del tag html <img />, definendo la src con la stessa procedura effettuata per il title della finestra:

html: ''

Non resta che lanciare il metodo show() per reindirizzare a video la struttura che abbiamo creato.

Lato server, nel nostro caso è PHP, realizziamo un algoritmo per popolare lo store con le immagini da caricare nella gallery, utilizzando una funzione per leggere il contenuto di una cartella e tenendo conto che il numero di elementi caricati deve corrispondere al valore definito nella toolbar. Lo script PHP regola solamente il caricamento dello store, sarà la classe Ext.DataView, con le sue strutture di supporto, che si farà carico delle operazione da effettuare per ottenere il risultato finale mostrato in questo screenshot.