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

Esecuzione di codice inline

Una delle funzionalità che offre più flessibilità è senza ombra di dubbio la possibilità di eseguire parti di codice personalizzato all'interno del codice del template senza bisogno di definire funzioni o creare variabili particolari. Qualsiasi frammento di codice contenuto tra {[ e ]} verrà eseguito normalmente come fosse codice Javascript e il risultato verrà inserito all'interno del template. Eventuali parametri sono disponibili all'interno dell'oggetto (automaticamente creato) values. Oltre a quest'ultimo oggetto Ext.XTemplate fornisce ulteriori informazioni: la documentazione ufficiale li elenca in maniera chiara su questa pagina. Ecco l'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.XTemplate(
		'<tpl for=".">',
			'<div class="person"',
				'{[ values.name == "Alberto" ? "style=\'color:red\'" : ""  ]}',
			'>',
				'<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>

Utilizzare i template per modificare componenti base del framework

Utilizzando ExtJS saranno molto rari i casi in cui sarà necessario creare un template da zero ed appenderlo a qualche elemento HTML già presente nella pagina. Spesso il loro utilizzo (sia nella forma di Ext.Template che in quella di Ext.XTemplate) sarà quello di personalizzare l'aspetto grafico dei componenti già presenti nella libreria. Molti di questi componenti infatti espongono la proprietà tpl che permetterà proprio di adattare il componente sulla base di un template definito da noi sviluppatori. Quest'aspetto è senza dubbio una delle caratteristiche vincenti di ExtJS che rendono il framework altamente e facilmente configurabile.

I principali componenti che possono essere personalizzati attraverso la proprietà tpl sono:

Ext.DataView
Ext.ListView
Ext.form.ComboBox
Ext.grid.TemplateColumn
Ext.grid.GroupingView
Ext.menu.Item
Ext.layout.MenuLayout
Ext.ColorPalette

Nei prossimi articoli esamineremo nel dettaglio alcuni di essi e proveremo ad adattarli alla nostra applicazione proprio tramite template.

Conclusioni

In questo articolo abbiamo analizzato uno degli aspetti più importanti della libreria soprattutto perché rappresenta uno dei mattoni sui quali tutta l'infrastruttura si basa. Gli stessi componenti definiti dagli sviluppatori di ExtJS sono stati creati utilizzando le classi Ext.Template e Ext.XTemplate proprio per garantire una facilità di manutenibilità e personalizzazione.

Comprendere quindi questo concetto permette non solo di utilizzare al meglio la libreria, ma anche di recepire i meccanismi interni spesso troppo difficili da analizzare.