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

Aggiungere elementi alla pagina...

L'esempio permette di modificare elementi DOM già presenti all'interno del nostro HTML. Ma come dobbiamo comportarci nel caso volessimo aggiungere nuovi nodi tramite Javascript? ExtJS ci viene incontro con alcuni metodi della classe Ext.Element e con una nuova classe statica che faciliterà non di poco la creazione di HTML: Ext.DomHelper.

Questa nuova classe permette di creare frammenti di HTML partendo sia da una stringa che da un oggetto Javascript composto da particolari proprietà.

...utilizzando una stringa HTML

Il primo metodo permette di creare nuovi nodi HTML alla pagina utilizzando stringhe; basta invocare il metodo statico Ext.DomHelper.append passando come primo parametro l'id del nodo container e come secondo parametro la stringa HTML (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() {
	Ext.DomHelper.append("div01", "<span id='span01'>ciao</span>");
	Ext.DomHelper.append("span01", "<a href='#' class='myLink'>Link</a>");
});
</script>
</head>
<body>
<div id='div01'></div>
</body>
</html>

... utilizzando un oggetto Javascript

Il secondo metodo è sicuramente più flessibile e permette di costruire un frammento HTML partendo da un oggetto Javascript anche complesso e indentato. Le proprietà dell'oggetto creato verranno trasformate in attributi HTML. Le uniche proprietà particolari sono:

tag (identifica il tipo di nodo);
children o cn (array contenente eventuali tag children);
cls (classe css per l'elemento);
html (stringa HTML da appendere all'elemento).

Ecco ora l'esempio di prima ">riscritto con questa nuova tecnica:

<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() {
	Ext.DomHelper.append("div01", {
		tag: "span",
		id: "span01",
		children: ["ciao", {
			tag: "a",
			href: "#",
			html: "Link",
			cls: "myLink"
		}]
	});
});
</script>
</head>
<body>
<div id='div01'></div>
</body>
</html>

Il pattern flyweight

L'utilizzo del metodo Ext.Element.get permette di referenziare, a partire da un id, una variabile con un elemento della pagina. Se all'interno della nostra applicazione avessimo però la necessita di ottenere molti elementi, utilizzando questo metodo rischieremmo di occupare, spesso inutilmente, una grandissima quantità di memoria per referenziare ogni volta il nuovo elemento recuperato dal DOM.

Per risolvere questo problema di performance, ExtJS mette a disposizione un oggetto Element condiviso tra i vari moduli dell'applicazione, utilizzabile tutte le volte che ci serve modificare un nodo della pagina senza però doverne salvare il riferimento. Utilizzando Ext.Element.fly (o il suo alias Ext.fly) possiamo far riferimento ad un particolare nodo senza però tenerne traccia in memoria.

Per approfondire questo utile e utilizzatissimo design pattern suggerisco la lettura del breve articolo su Wikipedia.

Pagina successiva

Pagine: