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

Tutti conoscono il difficile rapporto che intercorre tra Javascript e i componenti DOM presenti in una pagina HTML: differenze tra i vari browser, estendibilità limitata degli oggetti e assegnamento degli eventi base poco flessibile. All'interno di ExtJS, queste difficoltà vengono aggirate grazie alla classe Ext.Element che si occupa appunto di rappresentare un nodo HTML esponendone, sotto forma di metodi e di proprietà, tutte le funzionalità disponibili in un browser.

Per ottenere un oggetto Ext.Element si utilizza il metodo statico Ext.Element.get (o il suo alias Ext.get) passando come argomento l'id del nodo o eventualmente il riferimento all'oggetto HTMLElement. Una volta ottenuto l'oggetto è possibile modificarne la sua rappresentazione e il comportamento tramite un vasto insieme di proprietà e metodi esposti dal nostro framework.

Tra le proprietà l'unica degna di nota è dom la quale contiene un riferimento all'oggetto HTMLElement originale. Il grande insieme di metodi permette invece di:

modificare l'aspetto grafico dell'elemento (agendo sulle classi CSS o direttamente sulla proprietà da modificare);
ottenere informazioni sulla situazione attuale dell'elemento (posizionamento nella pagina o proprietà grafiche particolari);
navigare all'interno del documento partendo dall'elemento corrente (ottenere particolari tag children o risalire al tag parent);
alterare la struttura del documento partendo dall'elemento corrente (inserire nodi prima o dopo);
forzare la scatenazione di eventi (per esempio blur o focus);
assegnare e rimuovere callback su particolari eventi esposti dal browser (click, doubleclick, mouseover, mouseout, load,...);
modificare il contenuto HTML dell'elemento.

Tutti i metodi esposti sono particolarmente intuitivi e comprensibili. La miglior risorsa per recuperare eventuali informazioni riguardo al funzionamento di particolari funzioni rimane la documentazione ufficiale disponibile su questa pagina.

Ecco il primo esempio dell'articolo su come modificare alcuni comportamenti di elementi della pagina:

<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"); 
	alert(div2.getTop()); 
	div2.hover(function() {
		div1.hide();
	}, function() {
		div1.show();
	});
});
</script>
</head> 
<body> 
<div id='div01'></div> 
<div></div> 
</body> 
</html>

Il codice è abbastanza auto-esplicativo per cui non ci soffermeremo ulteriormente.

Pagina successiva

Pagine: