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

Attivazioni condizionali

Utilizzando il costrutto <tpl if="condizione"> è possibile introdurre condizioni all'interno dei nostri template. Non esiste nessun operatore di tipo else: è necessario utilizzare una seconda condizione opposta alla prima. Inoltre eventuali stringhe all'interno della condizione devono essere encodate utilizzando ". 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=".">',
			'<tpl if="name== "Alberto"">',		
				'<div class="person" style="color:red">',
			'</tpl>',
			'<tpl if="name!= "Alberto"">',		
				'<div class="person">',
			'</tpl>',
				'<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>

Esecuzione di funzioni

All'interno dei nostri template è possibile definire funzioni che verranno richiamate durante la fase di append. Le funzioni user-defined dovranno essere passate come se fossero configurazioni iniziali all'interno dell'oggetto JavaScript. Riscriviamo l'esempio di prima:

<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=".">',
			'<tpl if="this.isMe(name)">',		
				'<div class="person" style="color:red">',
			'</tpl>',
			'<tpl if="this.isNotMe(name)">',		
				'<div class="person">',
			'</tpl>',
				'<b>{name} {surname}</b><br/>',
				'Skills:<br/>',
				'<tpl for="skills">',
					'{#} - {.}<br/>',
				'</tpl>',
			'</div>',
		'</tpl>', {
		isMe: function(name) {
			return name == "Alberto";
		},
		isNotMe: function(name) {
			return name != "Alberto";
		}
	});
	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>

Pagina successiva

Pagine: