Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Ext.js

Pagine:

RSS Download

Ext JS: la classe Ext.Element per un DOM più comprensibile

di: Alberto Bottarini 22 Febbraio 2010

Le animazioni

Tutti i metodi di Ext.Element che manipolano la rappresentazione grafica dell'oggetto HTML non utilizzano un'animazione particolare ma modificano direttamente la proprietà agendo sulle relative proprietà esposte dal browser. Alcune metodi di manipolazione presentano un parametro opzionale animate che deve essere passato come ultimo e che permette di configurare l'eventuale animazione che vogliamo mostrare all'utente. Questo parametro può essere rappresentato da un boolean (nel caso true) per utilizzare un'animazione di default o da un oggetto Javascript nel caso volessimo personalizzare l'effetto. Le proprietà per modificare il comportamento dell'animazione sono quattro:

effect (default easeOut): stringa che identifica la tipologia di effetto da applicare utilizzabile da un set di tipi possibili (l'ultima versione di ExtJS supporta backBot, backIn, backOut, bouceBoth, bounceOut, bounceIn, easeBoth, easeBothStrong, easeIn, easeInStrong, easeNone, easeOut, easeOutStrong, elasticBoth, elasticIn, elasticOut);
duration (default 0.35): secondi o frazioni di secondi che identificano la durata dell'animazione (più il valore è alto, più l'animazione sarà lenta);
callback (default undefined): funzione che verrà invocata automaticamente una volta che l'animazione verrà completata;
scope (default Ext.Element corrente): eventuale scope di esecuzione della funzione di callback.

Rivediamo ora l'esempio precedente introducendo alcune componenti animate:

<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 div1 = Ext.get("div01");
	div1.setStyle({
		backgroundColor: "red",
		width: 300,
		height: 100
	});
	div1.update("contenuto dinamico");
	var div2 = div1.next();
	div2.setHeight(100);
	div2.setWidth(500);
	div2.setStyle("backgroundColor","blue", true);
	div2.hover(function() {
		div1.setWidth(500, {
			duration: .50,
			callback: function() {
				Ext.fly("console").update("W le animazioni"); //scrivo in console quando l'animazione è terminata
			}
		});
	}, function() {
		div1.setWidth(300,  {
			duration: 1, //piu lento
			easing: "elasticBoth", //cambio tipologia di animazione
			callback: function() {
				Ext.fly("console").update("");
			}
		});
	});
});
</script>
</head>
<body>
<div id='div01'></div>
<div></div>
<div id='console'></div>
</body>
</html>

Oltre ai metodi core esposti da Ext.Element, ciascun oggetto di questa classe eredita anche un insieme di metodi dall'oggetto Ext.Fx. Questi nuovi metodi permettono per esempio di interrompere (o fermare temporaneamente) l'animazione, creare un effetto di highlight al termine dell'animazione o sincronizzare la coda degli effetti. Come al solito, il miglior modo per approfondire l'argomento rimane la lettura della guida ufficiale.

Pagina successiva

Pagine: