Dopo aver installato il framework ed averne testato il funzionamento, procediamo oltre e vediamo quali strumenti abbiamo a disposizione per progettare il layout della nostra pagina web.
Ext ci fornisce un oggetto contenitore – Ext.Viewport – che rappresenta l’area visualizzabile dell’applicazione. All’interno di esso verranno inclusi tutti i componenti che andranno a costituire il layout definito (pannelli, toolbar, pulsanti ecc…). Una volta creato, l’oggetto Viewport, si auto-renderizza entro il document.body della pagina e va a ricoprire l’intero spazio di visualizzazione del browser. Può esistere una sola istanza di un Viewport nell’intera applicazione.
Ext.Viewport
var myview = new Ext.Viewport({
layout:'border',
items:[panel1,panel2,panel3]
});
Questa è la definizione minima di un Viewport. Prende in ingresso un oggetto con una proprietà layout (la modalità con cui visualizza i componenti che andranno a costituirlo) e una serie di elementi da contenere (items).
La proprietà layout ammette questi valori (stringhe): accordion, anchor, border, card, column, fit, form e table. Ogni tipo di layout caratterizza una diversa tipologia, comportamento e collocazione dei componenti del Viewport (items).
La proprietà items è un array di oggetti Ext.Component che in pratica sono le componenti dell’interfaccia utente visualizzate entro il Viewport.
Tra i vari component possibili prendiamo in considerazione gli oggetti di tipo Ext.Panel. Questi pannelli non sono altro che contenitori di altri component. Ogni panel è una sorta di frame che si occupa di accorpare component con funzionalità logicamente correlate. L’Ext.Panel possiede metodi e proprietà che gli consentono di visualizzarsi in un certo modo, di nascondersi o apparire a seguito di determinati eventi, di possedere toolbar, pulsanti e molto altro.
Nel codice precedente i tre oggetti panel1, panel2 e panel3 sono proprio oggetti Panel definibili come segue…
Ext.Panel
var panel1 = new Ext.Panel({
title: 'left',
region: 'west',
contentEl: 'mydiv',
border: true,
width: 300
});
Ogni panel si compone di un header (che ospita il titolo del panel), una toolbar (composta da menù o bottoni), un body (il vero e proprio contenuto del panel) e un footer (un contenitore per una serie di bottoni).
La proprietà title rappresenta il titolo che compare nell’header, la proprietà region serve a localizzare il panel in una data posizione entro il layout del suo contenitore (sia esso un panel o un viewport), la proprietà contentEl è l’id dell’elemento del DOM da cui il panel prenderà i propri contenuti. Esistono poi svariate altre proprietà che si occupano di come visualizzare il panel stesso (larghezza, altezza, bordo ecc…).
I panel sono racchiudibili uno nell’altro sfruttando la proprietà items già vista nel viewport…
//pannello superiore con toolbar
var top = new Ext.Panel({
tbar: [
new Ext.Button({
handler: function() {alert('first')},
icon: 'icons/accept.png'
}),
new Ext.Button({
text: 'second',
handler: function() {Ext.Msg.alert('Alert', 'second')}
}),
new Ext.Button({
text: 'third'
})
]
});
//pannello inferiore con bottoni
var bottom = new Ext.Panel({
buttons: [
new Ext.Button({
text: 'first'
}),
new Ext.Button({
text: 'second',
})
]
});
//contenitore
var container = new Ext.Panel({
items: [top,bottom]
});
I panel possono ricevere il proprio contenuto in linea (proprietà html) o acquisendolo da un elemento del DOM (proprietà contentEl). Vengono renderizzati a video quando sono inclusi in un oggetto Ext.Viewport o quando posseggono la proprietà renderTo (che accetta come valore un elemento del DOM da usare come contenitore del panel).
Ext.onReady(function() {
var top = new Ext.Panel({
layout: 'fit',
title: 'Sopra',
contentEl: 'top'
});
var bottom = new Ext.Panel({
layout: 'fit',
title: 'Sotto',
html: '<h1>Sotto</h1>'
});
var container = new Ext.Panel({
layout: 'anchor',
items: [top, bottom],
renderTo: 'container'
});
});
