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

Le dirette sottoclassi di Ext.Component

Come abbiamo detto in precedenza, la classe Ext.Component è una classe astratta e quindi non deve essere istanziata direttamente. Per lavorare con i Component quindi dobbiamo agire sulle sue sottoclassi. ExtJS prevede 5 sottoclassi principali tra le quali la più importante è BoxComponent e la tratteremo successivamente. Oltre a Ext.BoxComponent abbiamo a disposizione:

Ext.ColorPalette (xtype=colorpalette) che permette di creare pannelli per la selezione di un colore
Ext.DatePicker (xtype=datepicker) che permette di creare pannelli per la selezione di date
Ext.Editor (xtype=editor) che permette di creare campi di editing inline
Ext.menu.BaseItem (classe astratta) che include funzionalità comuni a tutti gli elementi che possono essere inclusi in un menu

Tutti gli altri componenti complessi di ExtJS fanno capo a Ext.BoxComponent ovvero una superclasse di Ext.Component che rappresenta il punto di partenza per tutti quei widget grafici che possono essere racchiusi in un box con una altezza e larghezza personalizzabile e variabile. Questa classe si occupa infatti di eventuali aggiustamenti alle dimensioni del box-model e al posizionamento del widget in pagina. Qualsiasi BoxComponent può fare riferimento ad un particolare elemento HTML presente in pagina oppure crearne uno ad hoc nel caso non volessimo creare markup preventivo. Ecco un piccolo esempio:

<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() {
				var empty = new Ext.BoxComponent({
					el: Ext.fly("box-component-div")
				});
				empty.update("BoxComponent");
				empty.setSize(300,400);
				var image = new Ext.BoxComponent({
					autoEl: {
						tag: "img",
						src: "http://www.html.it/common/img/html-logo.png"
					}
				});

				image.render(Ext.getBody());
			});
			
		</script>
	</head>

	<body>
		<div id="box-component-div"></div>
	</body>

</html>

Grazie alla proprietà el possiamo specificare un elemento HTML già esistente sul quale montare il BoxComponent mentre grazie alla proprietà autoEl possiamo specificare quale tag e quali attributi creare. Maggiori proprietà, metodi ed eventi sfruttabili sono disponibili sulle API ufficiali.

Lavorare a questo livello con i BoxComponent non è ancora molto efficace né premiante. La loro reale utilità verrà introdotta nel prossimo articolo quando approfondiremo un componente ancora più avanzato (Ext.Container) che ci permetterà di creare interfacce complesse e organizzate.