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

HelloWorld!

Dopo una prima piccola parte teorica, introduciamo brevemente alcune funzionalità del framework per ingolosire maggiormente il lettore curioso che non conosce ancora niente del framework ExtJS.

I due esempi che seguiranno presenteranno una fondamentale differenza. Il primo definirà un'interfaccia web utilizzando solamente ExtJS quindi senza usare particolari tag HTML ma sfruttando solamente la potenza di Javascript. Il secondo invece permetterà di integrare la libreria in una pagina la cui struttura è stata precedentemente definita in HTML.

ExtJS come libreria stand-alone

In questo piccolo esempio creeremo la struttura base dell'applicazione all'interno della quale inseriremo tutti i nostri componenti. Lo scheletro dell'applicazione viene definito come un oggetto Viewport. Ciascuna applicazione realizzata in ExtJS non potrà avere più di un Viewport.

La struttura sarà simile a quella riportata da questo screenshot:

Figura 1 - Screenshot (clicca per ingrandire)

Ecco ora 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 viewport;
Ext.onReady(function() {

	viewport = new Ext.Viewport({
		layout: 'border',
		items: [{
		    region: 'north',
		    title: 'Nome dell\'applicazione',
		    autoHeight: true,
		    border: false,
		    margins: '0 0 5 0'
		}, {
		    region: 'west',
		    collapsible: true,
		    title: 'Menu',
		    width: 200
		}, {
		    region: 'south',
		    title: 'Informazioni sullo stato',
		    html: 'Applicazione avviata alle ore 10.00',
		    split: true,
		    height: 100,
		    minHeight: 100
		}, {
		    region: 'east',
		    title: 'Pannello laterale',
		    collapsible: true,
		    split: true,
		    width: 200,
		    html :"Contenuto del pannello laterale"
		}, {
		    region: 'center',
		    xtype: 'tabpanel', // TabPanel itself has no title
			activeTab:0,
		    items: [{
		        title: 'Tab1',
		        html: 'Contenuto del tab 1'
		    },{
		        title: 'Tab2',
		        html: 'Contenuto del tab 2'
		    },{
		        title: 'Tab3',
		        html: 'Contenuto del tab 3'
		    }]
		}]
	});

});
</script>
</head>
<body></body>
</html>

Innanzitutto vengono importati i file necessari (ext-base.js, ext-all.js ed ext-all.css) e successivamente definiamo una funzione generica da passare al metodo Ext.onReady che si occuperà di eseguire il codice al completamento del rendering della pagina.

Il codice eseguito non è che una semplice instanziazione di un oggetto Ext.Viewport a partire da una serie di parametri tra di loro indentati in più oggetti di configurazione. Alcune di queste sono comprensibili anche a chi non mastica l'inglese mentre altre sono più complesse. Approfondiremo questi aspetti successivamente, per ora accontentiamoci di aver configurato ed avviato la prima applicazione con ExtJS.

Pagina successiva

Pagine: