Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Ext.js

Pagine:

RSS

Ext JS: progettare interfacce con Ext.Component

di: Alberto Bottarini 21 Giugno 2010

Dopo aver introdotto con i primi 5 articoli di questa serie il framework ExtJS da un punto di vista teorico, da questo articolo inizieremo con l'utilizzo vero e proprio della libreria creando interfacce web complesse.

La superclasse Ext.Component

Qualsiasi componente grafico o widget presente in pagina, dal più banale come un bottone al più complesso come una griglia di dati o un grafico, estende in maniera più o meno diretta la classe Ext.Component. Questa classe è astratta e non dovrebbe mai essere istanziata direttamente: tutti i widget necessari all'applicazione estendono e dovranno estendere Ext.Component (o una sua ulteriore sottoclasse).

Tutte le sottoclassi che estendono Ext.Component partecipano al ciclo di vita automatizzato presente in ExtJS che prevede la creazione, il rendering e la distruzione.

L'importanza dell'id e della classe Ext.ComponentMgr

Ogni istanza di Ext.Component creata in pagina ha un id univoco che lo identifica in maniera diretta all'interno dell'applicazione. L'id può essere assegnato in maniera statica dall'utente o può essere gestito dinamicamente dal framework. Questo id ha il duplice scopo di identificare l'elemento HTML che rappresenta il componente e di permettere l'utilizzo della classe Ext.ComponentMgr.

Quest'ultima è una classe statica che si offre come archivio di tutti i componenti presenti in pagina. Grazie al metodo get() è possibile recuperare qualsiasi componente partendo dal suo id. Spesso i componenti, una volta renderizzati in pagina, generano una serie di elementi HTML gerarchicamente collegati. L'id in questo caso fa riferimento solo al tag (spesso un div) più esterno e che rappresenta il componente nel suo insieme.

Ecco un breve esempio nel quale vengono creati tre pannelli, vengono renderizzati all'interno del body della pagina e successivamente vengono modificati a partire dal loro id. Per i primi due pannelli utilizziamo un id personalizzato mentre per il terzo sfruttiamo il motore di generazione di ExtJS (per tutti gli esempi di questo articolo è stata usata la versione 3.2.1 del framework).

<html>

	<head>
		<script src="../extjs/adapter/ext/ext-base.js"></script>
		<script src="../extjs/ext-all.js"></script>
		<link rel="stylesheet" href="../extjs/resources/css/ext-all.css" />
		<script>

			Ext.onReady(function() {
				new Ext.Panel({
					html: "contenuto del panel 1",
					title: "Pannello 1",
					height: 300,
					width: 400,
					id:"panel1",
					renderTo: Ext.getBody()
				});
				new Ext.Panel({
					html: "contenuto del panel 2",
					title: "Pannello 2",
					height: 300,
					width: 300,
					id:"panel2",
					renderTo: Ext.getBody()
				});
				new Ext.Panel({
					html: "contenuto del panel 3",
					title: "Pannello 3",
					height: 200,
					width: 100,
					renderTo: Ext.getBody()
				});
				Ext.ComponentMgr.get("panel1").setSize(100,200); //cambio dimensioni
				Ext.ComponentMgr.get("panel2").setDisabled(true); //disabilito
				Ext.ComponentMgr.get("ext-comp-1001").destroy(); //distruggo
			});
			
		</script>
	</head>

	<body>

	</body>

</html>

Pagina successiva

Pagine: