Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Ext.js

Pagine:

RSS

Ext JS: creiamo l'HTML con Ext.Template e Ext.XTemplate

di: Alberto Bottarini 12 Aprile 2010

Nell'articolo precedente abbiamo visto come sia possibile creare nuovi elementi della pagina con ExtJS utilizzando la classe statica Ext.DomHelper. Nonostante la classe si adatti perfettamente a frammenti di HTML statici, essa presenta molte difficoltà nel caso in cui l'HTML da includere in pagina sia dipendente da eventuali parametri inseriti dall'utente o ricevuti dal server. Questa necessità non è per nulla trascurabile: sono frequentissimi infatti gli aggiornamenti della pagina sulla base di contenuti flessibili.

Per realizzare frammenti di HTML che rispondano appunto a questa necessità, ExtJS mette a disposizione due classi: Ext.Template ed Ext.XTemplate. Entrambe mettono a disposizione la possibilità di creare template, ovvero frammenti "astratti" di HTML che vengono successivamente "concretizzati" partendo da una struttura di dati. Questa metodologia di sviluppo si ispira al concetto Model-View-Controller con il quale ogni componente dell'applicazione deve essere autonomo rispetto agli altri. I template infatti rappresenteranno il componente View (ovvero la rappresentazione grafica) indipendente dal Model (struttura dei dati) e dal Controller (logica di business) che verranno implementati da altre classi.

Template di base con Ext.Template

La classe Ext.Template premette di definire e di popolare template partendo da una struttura di dati sottoforma di oggetti Javascript o di vettori. La definizione di un template avviene a partire da una stringa all'interno della quale saranno presenti placeholder che verranno poi sostituiti (automaticamente dal motore di ExtJS) con i dati veri e propri.

Il primo template

Ecco il primo esempio:

<html> 
<head> 
<script src="../ext-base.js" type="text/javascript"></script> 
<script src="../ext-all-debug.js" type="text/javascript"></script> 
<link rel="stylesheet" href="../css/ext-all.css"></link> 
<script type="text/javascript"> 
Ext.onReady(function() {
	var template = new Ext.Template( 
		"<div class='person'>",
			"<b>{name} {surname}</b><br/>", 
			"Residente in {address}<br/>", 
			"{city} {cap}",
		"</div>"
	); 
	var data = {
		name: "Alberto", 
		surname: "Bottarini", 
		address: "Via Roma 10", 
		city: "Milano", 
		cap: "20100"
	} 
	template.append("div01", data);
});
</script> 
</head> 
<body> 
<div id='div01'></div> 
</body> 
</html>

La creazione di un oggetto Ext.Template avviene passando al costruttore un elenco di stringhe per sfruttare la possibilità di indentazione e di ritorno a capo (passando un unica stringa questo non era possibile). Grazie al metodo append inseriamo i dati contenuti all'interno dell'oggetto data nel template e appendiamo il risultato all'interno del div01. L'ultima cosa da notare rimangono i placeholder. Utilizzando la sintassi {nomeproprietà} possiamo appunto far riferimento alla proprietà dell'oggetto utilizzato come modello dei dati.