JavaScript » Articoli » Ext.js
Ext JS: progettare interfacce con le sottoclassi di Ext.BoxComponent
di: Alberto Bottarini 30 Agosto 2010
Ext.Spacer
L'Ext.Spacer è sicuramente il componente più semplice e banale di tutto il framework. Il suo unico scopo è quello di creare spaziature tra altri componenti per permettere di realizzare interfacce oltre che funzionali anche gradevoli e ordinate. Spesso questo elemento viene utilizzato nelle toolbar per allineare elementi sulla destra.
Ext.Toolbar.Item
Gli elementi di tipo Toolbar.Item rappresentano qualsiasi tipologia di componente che è posizionabile all'interno di una Ext.Toolbar. Approfondiremo questa categoria quando analizzeremo più nel dettaglio la creazione e la personalizzazione delle toolbar nei prossimi articoli.
Ext.form.Field
La classe Ext.form.Field rappresenta la superclasse dal quale derivano tutti i campi di input presenti nelle form. Offre funzionalità come la gestione e la validazione dei valori inseriti, il dimensionamento e la gestione degli eventi. Anche in questo caso posticiperemo l'approfondimento di questa tipologia di widget nel momento in cui introdurremo la gestione delle form e di tutto il package Ext.form.
Ext.Label
Come per Ext.form.Field, anche Ext.Label viene spesso utilizzata all'interno di form per aggiungere una particolare etichetta per i campi di input. L'elemento è molto semplice e il suo utilizzo, che comunque verrà approfondito quando tratteremo le form, è banale.
Ext.slider.MultiSlider e Ext.Slider
La classe Ext.slider.MultiSlider e in generale tutto il package Ext.slider permette di creare barre di selezione per valori numerici: le cosiddette slider. Esse possono orientate orizzontalmente o verticalmente, avere valori incrementali, valore minimo e massimo personalizzabili e possono essere utilizzati anche con la tastiera. Il framework espone due classi: Ext.slider.MultiSlider e Ext.slider.SingleSlider. La differenza tra le due classi risiede nel fatto che il MultiSlider permette di avere più slider sovrapposti alla stessa barra.
Per garantire la retrocompatibilità entrambe le classi presentano un alias verso Ext.Slider. La differenza tra lo slider multiplo e singolo risiede nella presenza della proprietà value (per i singoli) e values (per i multipli). La distinzione in due classi è semplicemente per una maggiore organizzazione a livello di codice tant'è che anche la documentazione ufficiale di ExtJS suggerisce di utilizzare sempre e comunque la classe Ext.Slider.
Ecco un esempio utilizzando appunto l'alias Ext.Slider e le proprietà value e values per differenziare la tipologia di slider (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 s = new Ext.Slider({
width: 200,
values: [50,70, 90], //valori multipli = MultiSlider
increment: 10,
minValue: 0,
maxValue: 100
});
s.render(Ext.getBody());
var s2 = new Ext.Slider({
renderTo: Ext.getBody(),
value: 30, //valore singolo = SingleSlider
height: 300,
minValue: 0,
maxValue: 100,
vertical : true
});
s2.render(Ext.getBody());
var b = new Ext.Button({
text: "slider 2",
handler: function() {
Ext.Msg.alert("slider", "valore: " + s2.getValue());
}
});
b.render(Ext.getBody());
});
</script>
</head>
<body>
</body>
</html>
Ext.Container
La classe Ext.Container verrà trattata nel prossimo articolo in maniera più analitica data la vastità dell'argomento e la necessità di approfondire ulteriori concetti come quello dei layout.
Ultimi articoli JavaScript
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida jQuery UICreare siti ricchi e dinamici con jQuery UI, il progetto ufficiale... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |