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

Estendiamo Ext.Template: Ext.XTemplate

Nonostante formats e compilazione siano due funzionalità avanzate all'interno del concetto di template, spesso non sono sufficienti a gestire tutte le situazioni possibili, soprattutto quando il modello di dati da mostrare all'utente non è banale come quelli visti negli esempi in precedenza. Immaginiamo per esempio un oggetto di partenza composto non solo da primitivi (stringhe e numeri) ma anche da variabili composte come altri oggetti o vettori sui quali magari è necessario effettuare controlli condizionali o cicli perché non è noto a priori il conteggio.

In situazioni più complesse il framework ci mette a disposizione una tipologia di template più complessa, appunto Ext.XTemplate. Se da un lato questa classe offre maggiori potenzialità, dall'altra è più dispendiosa in termini di risorse. È compito del programmatore utilizzare lo strumento che meglio si adatta alle sue esigenze: non ha senso utilizzare un Ext.XTemplate per un template come quelli visti nei primi esempi. Utilizzando Ext.XTemplate è consigliato usare l'apice singolo (') come divisore tra le varie righe di codice al posto del doppio apice (").

Gestione di array

All'interno della definizione di un template è possibile creare strutture dinamiche partendo da un vettore sia di elementi singoli che di elementi complessi. Il costrutto per creare cicli è <tpl for="nome_vettore">. All'interno di questo elemento possiamo far riferimento all'elemento corrente con un punto (.) e all'indice con il simbolo cancelletto (#). Ecco un esempio chiarificatore:

<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.XTemplate(
		'<tpl for=".">',
			'<div class="person">',
				'<b>{name} {surname}</b><br/>',
				'Skills:<br/>',
				'<tpl for="skills">',
					'{#} - {.}<br/>',
				'</tpl>',
			'</div>',
		'</tpl>'
	);
	var data = [{
		name: 'Alberto',
		surname: 'Bottarini',
		skills: [ 'JavaScript', 'ExtJS', 'jQuery']
	}, {
		name: 'Marco',
		surname: 'Marchi',
		skills: [ 'Java', 'Spring', 'Hibernate']
	}, {
		name: 'Luca',
		surname: 'Luchi',
		skills: [ '.NET', 'ASP']
	}]
	template.append('div01', data);
});
</script>
</head>
<body>
<div id='div01'></div>
</body>
</html>

Termina qui la prima parte dell'articolo. Nella seconda, online tra sette giorni, affronteremo i seguenti argomenti: condizioni, esecuzione di funzioni, codice inline.

Pagina successiva

Pagine: