JavaScript » Articoli » Ext.js
Ext JS: la classe Ext.Element per un DOM più comprensibile
di: Alberto Bottarini 22 Febbraio 2010
Ext.CompositeElement e Ext.CompositeElementLite
L'ultimo strumento esposto dal framework per manipolare la pagina è rappresentato dalle due classi Ext.CompositeElement e Ext.CompositeElementLite. La differenza tra le due classi è lieve: il componente lite semplicemente presenta un numero di metodi inferiori e deve essere utilizzato a meno di richieste particolari che necessitano uno dei metodi presenti in Ext.CompositeElement.
Un CompositeElement rappresenta un elenco di Ext.Element che appartengono ad uno stesso gruppo concettuale e che devono essere trattati come un'unica entità. Grazie ad essi possiamo invocare qualsiasi metodo esposto da Ext.Element e Ext.Fx non su un unico oggetto ma su una collezione di Ext.Element. Oltre a questi metodi “ereditati” queste due classi presentano metodi per alterare la composizione interna degli elementi dando la possibilità al programmatore di aggiungere e rimuovere elementi.
Il miglior modo per ottenere un CompositeElement è l'utilizzo del metodo statico Ext.Element.select (o il suo alias Ext.select) passando come parametro principale un selettore CSS sotto forma di stringa.
Ecco un breve esempio chiarificatore:
<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 allComponent = Ext.select("div");
allComponent.setWidth(400);
allComponent.setHeight(100);
allComponent.hover(function() {
//nel caso di CompositeElement lo scope non è l'Ext.Element ma l'oggetto HTML
//usiamo Ext.fly per ottenere l'Ext.Element
Ext.fly(this).setWidth(700, true);
}, function() {
Ext.fly(this).setWidth(400, true);
});
//utilizzo la direttiva even per ottenere i div "pari"
Ext.select("div:even").setStyle("backgroundColor","lightblue");
//utilizzo la direttiva odd per ottenere i div "dispari"
Ext.select("div:odd").setStyle("backgroundColor","darkblue");
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>