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

I formats

Spesso è necessario formattare i dati da mostrare all'utente in quanto essi non sono rappresentabili direttamente in un formato comprensibile. Pensiamo per esempio ad un oggetto Date il quale presenta diverse possibilità di utilizzo e di visualizzazione. Per questa e per altre funzionalità ci vengono in soccorso i cosidetti formats ovvero delle piccole funzioni di utilità implementate direttamente all'interno dei nostri template. L'elenco di queste funzioni di utilità sono rappresentate dai metodi della classe Ext.util.Format. Questo significa inoltre che è possibile aggiungere proprie funzioni di formattazione semplicemente aggiungendo nuovi metodi alla classe. Ecco un breve esempio dei formats:

<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:capitalize} {surname:uppercase}</b><br/>", 
			"Residente in {address:ellipsis(10)}<br/>", 
			"{city} {cap}<br/>", 
			"Nato il {birthdate:date('d/m/Y')}",
		"</div>"
	); 
	var data = {
		name: "alberto", 
		surname: "bottarini", 
		address: "via roma 10", 
		city: "Milano", 
		cap: "20100", 
		birthdate: new Date()
	} 
	template.append("div01", data);
}); 
</script> 
</head> 
<body> 
<div id='div01'></div> 
</body> 
</html>

Durante la creazione di un template è possibile, oltre alle stringhe rappresentanti i frammenti di HTML, passare come parametro un oggetto di configurazione. Tra le configurazioni possibili è presente una proprietà disableFormats (di default settata a false) che permette di disattivare l'utilizzo dei formats quando essi non sono utilizzati nel template per migliorare le performance di sostituzione delle variabili:

var template = new Ext.Template( 
	"<div class='person'>",
		"<b>{name:capitalize} {surname:uppercase}</b><br/>", 
		"Residente in {address:ellipsis(10)}<br/>", 
		"{city} {cap}<br/>", 
		"Nato il {birthdate:date('d/m/Y')}",
	"</div>", { 
	disableFormats: true
});

La compilazione

Nelle ultime versioni del framework è stata inserita la possibilità di compilare i template. La compilazione permette di sostituire la funzione di elaborazione classica del template con una più performante e rapida. Compilare un template è necessario nel momento in cui lo stesso verrò riutilizzato più volte nella stessa pagina.

Pagina successiva

Pagine: