Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Ext.js

Pagine:

RSS

Ext JS: Le classi Ext.Viewport, Ext.Panel e Ext.Window

di: Alberto Bottarini 15 Novembre 2010

Nonostante la sua semplicità, la classe Ext.Viewport è di fondamentale importanza per quelle applicazioni che intendono sfruttare intensivamente ExtJS mentre ricopre un ruolo abbastanza inutile se si intende utilizzare il framework per arricchire soluzioni software già avviate.

Un Ext.Viewport è semplicemente l'Ext.Container principale di tutta l'applicazione, quello che verrà renderizzato all'interno del body della pagina HTML e che conterrà, direttamente o indirettamente, tutti i widget necessari alla realizzazione dell'interfaccia utente. La caratteristica principale di questo componente è quella di renderizzarsi e ridimensionarsi automaticamente sulla base della pagina web. Esso non supporta lo scrolling (dovranno essere i componenti interni ad esso a sfruttarlo) e potrà esistere un unico Ext.Viewport all'interno dell'applicazione.

Dati per assodati questi concetti, un Ext.Viewport è un container semplice, con un proprio layout e una serie di item figli. Gli esempi infatti sono semplicemente una copia degli esempi realizzati nell'articolo precedente: invece che costruire un panel da renderizzare nel body, ora utilizzeremo la classe Ext.Viewport che adatterà il nuovo componente in maniera automatica (demo):

<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.Viewport({
					layout:'border',
					items: [{
						title: 'Center',
						region: 'center',
						html: 'I\'m the center panel'
					},{
						title: 'West',
						html: 'I\'m the west panel and you can resize me',
						region: 'west',
						width: 100,
						minWidth: 50,
						maxWidth: 150,
						split: true
					},{
						title: 'North',
						html: 'I\'m the north panel',
						region: 'north',
						heigth: 30
					}, {
						html: 'I\'m the south panel with no title',
						region: 'south',
						heigth: 30
					}]
				});
				
			});
			
		</script>
	</head>

	<body>

	</body>

</html>

Una volta renderizzato in pagina il viewport, quest'ultimo occuperà automaticamente l'intera finestra del browser e si occuperà di ridimensionare i proprio figli quando viene ridimensionato lo spazio a disposizione per l'applicazione.

Nell'esempio in questione abbiamo utilizzato un border layout inserendo (oltre a quello centrale che è obbligatorio) anche i pannelli west, north e south. Ovviamente è possibile implementare diverse soluzioni del viewport sfruttando eventuali altri layout offerti da ExtJS.

Ecco per esempio un viewport realizzato sulla base di un AccordionLayout (demo):

<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.Viewport({
					layout:'accordion',
					title:'panel',
					height: 300,
					width: 400,
					layoutConfig: {
				        animate: true
				    },
					items:  [{
						xtype:'panel',
						title:'panel 2',
						html: 'I\'m the panel 2'
					},{
						xtype:'panel',
						title:'panel 3',
						html: 'I\'m the panel 3'
					},{
						xtype:'panel',
						title:'panel 4',
						html: 'I\'m the panel 4'
					}]
				});
				
			});
			
		</script>
	</head>

	<body>

	</body>

</html>

Pagina successiva

Pagine: