Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Ext.js

Pagine:

RSS

Ext JS: il desktop sbarca sui browser

di: Alberto Bottarini 14 Dicembre 2009

ExtJS partendo dall'HTML

Non sempre è possibile riscrivere un intero prodotto da zero; spesso ci troviamo nella situazione di dover integrare un nuovo componente in un'architettura già pronta e funzionante. ExtJS è in grado di fare anche questo: basta renderizzare un particolare componente grafico realizzato con il framework all'interno di un elemento HTML esistente tramite il metodo render.

Nell'esempio realizzeremo un semplice form (per ora senza bottoni di submit) all'interno di un div già presente nel markup della pagina.

Anche in questo presentiamo uno screenshot:

Figura 2 - Screenshot (clicca per ingrandire)

Ecco il codice:

<html>
<head>
<script src="../ext-base.js" type="text/javascript"></script>
<script src="../ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/ext-all.css"></link>
<script type="text/javascript">
var formPanel;
Ext.onReady(function() {
	formPanel = new Ext.form.FormPanel({
		title: "Il mio primo form",
		frame: true,
		items: [{
			xtype: 'textfield',
			name: 'nome',
			width: 300,
			fieldLabel: "Nome"
		},{
			xtype: 'textfield',
			name: 'cognome',
			width: 300,
			fieldLabel: "Cognome"
		},{
			xtype: 'textfield',
			name: 'email',
			width: 300,
			fieldLabel: "Email"
		}],
		buttons: [{
			text: 'show',
			handler: function() {
				alert("Il tuo nome: "+formPanel.getForm().getValues().nome);
			}
		}]
	});
	formPanel.render("form-container");
});
</script>
</head>
<body>
<div id="form-container" style="width: 600px; height: 400px;position:absolute;top:100px;left:200px;"></div>
</body>
</html>

Anche in questo caso all'interno della funzione passata come parametro a Ext.onReady definiamo un oggetto di tipo Ext.form.FormPanel configurandolo tramite un oggetto di tipo complesso contenente tra i suoi attributi items (che contiene l'elenco dei campi del form) e buttons (con la relativa funzione handler). Una volta istanziato l'oggetto invochiamo il metodo render passandogli come parametro l'id dell'elemento HTML che dovrà contenere il componente.

Rispetto all'esempio di prima, ora dobbiamo manualmente forzare il render (tramite appunto il metodo render). Questo perché per gli oggetti di tipo Viewport, in quanto particolari e unici per l'applicazione, il render avviene in automatico in fase di instanziazione all'interno del body della pagina.

Conclusioni

Per ora è tutto. Spero di avervi incuriosito riguardo al framework ExtJS. In questo primo articolo sono stato appositamente abbastanza sintetico nella spiegazione degli esempi per il semplice fatto che dovevano essere semplicemente un antipasto dei prossimi articoli e una sorta di dimostrazione delle potenzialità di ExtJS.

I sorgenti delle prove realizzate in questo articolo li trovate in questo pacchetto zip.

Come al solito se qualcuno è interessato a studiare meglio o modificare gli esempi non posso che segnalare la documentazione ufficiale disponibile sul sito del framework.