- Indice guida completa
- ExtJS: download e documentazione
- Esempio finale dell’articolo
Nell’articolo precedente abbiamo visto come creare una Web App che utilizzi ExtJS per la creazione dell’interfaccia e abbiamo utilizzato un Border Layout come struttura. Vediamo adesso come raffinare la pagina utilizzando gli strumenti che ExtJS stesso ci offre.
Un esempio di Border Layout con ExtJs
Guardando il codice del layout creato precedentemente, notiamo subito che vi è molta ridondanza di codice. Ad esempio tutti (o quasi) i 5 pannelli creati condividono alcune proprietà. Per evitare di scriverle più volte è possibile utilizzare l’attributo defaults:
defaults: {
collapsible: true,
split: true,
header : true,
bodyStyle: 'padding: 10px;'
}
Da adesso tutti i pannelli contenuti all’interno dell’array items[] erediterarenno questi attributi, dunque dovranno essere utilizzati solo se questo valore di default non va bene. Si noti che abbiamo anche aggiunto del padding inserendolo all’interno del campo bodyStyle. Ecco il codice completo:
Ext.application({
name : 'Hello World ExtJS',
launch : function() {
Ext.create('Ext.container.Viewport', {
width : 1000,
layout : {
type : 'border',
padding : 0
},
defaults : {
collapsible : true,
split : true,
header : true,
bodyStyle : 'padding: 10px;'
},
items : [{
region : 'north',
height : 130,
title : 'North title',
html : 'Hello World!'
}, {
region : 'west',
width : 200,
title : 'West title',
html : 'West Panel!'
}, {
region : 'east',
width : 200,
title : 'East title',
html : 'Hello World!'
}, {
region : 'center',
title : 'Center title',
html : 'Hello World!'
}, {
region : 'south',
collapsible : false,
split : false,
height : 40,
header : false,
frame : false,
border : false,
bodyStyle : 'padding: 0;',
html : '<p style="letter-spacing: 1px;" align="center"><strong>Hello World ExtJS - GNU General Public License v3</strong></p>'
}]
})
}
});
Ci si pone adesso una nuova domanda: e se non volessimo che i nostri contenuti siano inglobati all’interno del file javascript?
ExtJS fornisce diversi strumenti molto potenti per caricare contenuti da file esterni (xml, json ad esempio), in maniera asincrona, ecc ma questi non saranno trattati in questo articolo. E’ però possibile molto banalmente inglobare i contenuti all’interno della stessa pagina index.html, ad esempio creando un div per ogni pannello. Vediamo dunque come cambia la pagina:
<html>
<head>
<title>Hello World ExtJS</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="north">
North Panel
</div>
<div id="east">
East Panel
</div>
<div id="west">
West Panel
</div>
<div id="center">
Center Panel
</div>
<div id="south">
<p style="letter-spacing: 1px;" align="center">
<strong>Hello World ExtJS - GNU General Public License v3</strong>
</p>
</div>
</body>
</html>
Per far si che il contenuto dei pannelli sia quello dei rispettivi div è necessario utilizzare l’attributo contentEl. Ecco il file app.js:
Ext.application({
name : 'Hello World ExtJS',
launch : function() {
Ext.create('Ext.container.Viewport', {
width : 1000,
layout : {
type : 'border',
padding : 0
},
defaults : {
collapsible : true,
split : true,
header : true,
bodyStyle : 'padding: 10px;'
},
items : [{
region : 'north',
height : 130,
title : 'North title',
contentEl : 'north'
}, {
region : 'west',
width : 200,
title : 'West title',
contentEl : 'west'
}, {
region : 'east',
width : 200,
title : 'East title',
contentEl : 'east'
}, {
region : 'center',
title : 'Center title',
contentEl : 'center'
}, {
region : 'south',
collapsible : false,
split : false,
height : 40,
header : false,
frame : false,
border : false,
bodyStyle : 'padding: 0;',
contentEl : 'south'
}]
})
}
});
Negli articoli successivi vedremo come utilizzare dei componenti più avanzati, quali Tab Panel, Grid, Drag and Drop, ecc.
- Esempio finale dell’articolo
- Prossimo Articolo: Utilizzo del Tab Panel
- Indice guida completa
