Microsoft's Internet Explorer browser has no built-in vector graphics machinery required for "loss-free" gradient background themes.
Please upgrade to a better browser such as Firefox, Opera, Safari or others with built-in vector graphics machinery and much more. (Learn more or post questions or comments at the Slide Show (S9) project site. Thanks!)
ExtJS è un potente framework Javascript orientato allo sviluppo di Rich Internet Application.
ExtJS è un potente framework Javascript orientato allo sviluppo di Rich Internet Application.
ExtJS viene distribuito sotto licenza GPLv3 e ne è consentito l’utilizzo in applicazioni OpenSource senza ulteriori costi di licenza.
Nel caso in cui si voglia al contrario distribuire un applicazione senza fornirne i sorgenti, è possibile acquistare delle licenze per-developer.
L’acquisto dei pacchetti commerciali danno diritto inoltre ad accedere al repository SVN della versione del framework in sviluppo e vari livelli di supporto tecnico (attraverso il forum, email e telefono)
ExtJS è un potente framework Javascript orientato allo sviluppo di Rich Internet Application.
Ultimamente è stata rilasciata sotto la più permissiva MIT License, la nuova verione del Core della libreria (ExtCore 3.0) contenente le funzionalità base (escluso quindi il set di widget):
La libreria è disponibile per il download all’url:
L’SDK, oltre ai file di libreria minificati e le risorse (css ed immagini necessarie ai widget), contiene:
ExtJS è dotata di una documentazione molto completa (contenente il reference dell’intera libreria) a cui è possibile accedere online:
L’apidoc è contenuta comunque nell’SDK ed è consultabile offline.
Per accedere all’apidoc è necessario renderla accessibile attraverso HTTP (mediante un webserver)
A questo scopo è conveniente copiare (o link-are simbolicamente) la directory contenente extjs nella Document Root del proprio webserver locale.
<html> <head> <title>ExtJS Basic Page</title> <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" /> <script src="lib/ext/adapter/ext/ext-base.js"></script> <script src="lib/ext/ext-all-debug.js"></script> </head> <body> <!-- Empty body --> </body> </html>
<html> <head> <title>Hello World from ExtJS!!!</title> <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" /> <script src="lib/ext/adapter/ext/ext-base.js"></script> <script src="lib/ext/ext-all-debug.js"></script> <script> Ext.onReady(function(){ Ext.Msg.alert('Hello World (title)', 'Hello World from ExtJS!!! (content)'); }); </script> </head> <body> <!-- Empty body --> </body> </html>
Terminato il caricamento del framework nello spazio globale Javascript sarà presente l’oggetto Ext, il quale costituisce:
Come con ogni altro framework Javascript che si rispetti anche ExtJS fornisce un comodo helper per far si che la nostra applicazione venga eseguita subito dopo il caricamento di tutto l’HTML (ma prima di aver caricato tutte le immagini).
Ext.onReady(function () { // YOUR CODE HERE });
Ext.Msg (o Ext.MessageBox) è contenuta nel namespace costituito dall’oggetto Ext, ed è ha sua volta un oggetto singleton che raccoglie funzioni di utilità per la creazione di vari tipi di MessageBox:
Ext.Msg.alert('Hello World (title)', 'Hello World from ExtJS!!! (content)'); Ext.Msg.show({ icon: Ext.MessageBox.QUESTION title: 'Hello', msg: 'Do you like ExtJS?', buttons: Ext.Msg.YESNOCANCEL, }); Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){ if (btn == 'ok'){ Ext.Msg.alert('ENTERED TEXT', text); } });
Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){ if (btn == 'ok'){ Ext.Msg.alert('ENTERED TEXT', text); } });
result = Ext.Msg.prompt('Name', 'Please enter your name:'); Ext.Msg.alert('ENTERED TEXT', result); });
La maggior parte delle funzioni (ma soprattutto i componenti) accettano la maggior parte delle opzioni attraverso un object di configurazione:
Ext.Msg.show({ icon: Ext.MessageBox.QUESTION title: 'Hello', msg: 'Do you like ExtJS?', buttons: Ext.Msg.YESNOCANCEL, });
Mediante Ext.apply(dest,src,defaults) è possibile mescolare gli oggetti di configurazione tra di loro:
var baseconfig = { icon: Ext.MessageBox.QUESTION, buttons: Ext.Msg.YESNOCANCEL } var myconfig = {}; Ext.apply(myconfig, { title: 'Hello', msg: 'Do you like ExtJS?'}, baseconfig ); Ext.Msg.show(myconfig);
Ext.get consente di selezionare singoli elementi DOM e di effettuarne un wrap con il prototype Ext.Element, contenente le funzioni di utilità ExtJS:
var el = Ext.get("my-text"); el.setWidth(200,true); el.addClassOnOver(".highlight"); el.on('click', function(e) { Ext.Msg.alert("Msg","OK"); });
Ext.query e Ext.select consentono la selezione di elementi in stile jQuery:
var el = Ext.query("#my-text"); var m_el = Ext.select("#my-text li"); m_el.each(function (e) { e.highlight(); });
Nascosta tra le funzioni disponibili nella libreria in versione debugging c’è la funzione Ext.log!
Uno dei punti di forza di ExtJS è sicuramente costituito dai componenti di Layouting configurabili e componibili tra di loro:
var p = new Ext.Panel({ title: 'Column Layout - Percentage Only', layout:'column', items: [{ title: 'Column 1', columnWidth: .25 },{ title: 'Column 2', columnWidth: .6 },{ title: 'Column 3', columnWidth: .15 }] });
var myBorderPanel = new Ext.Panel({ renderTo: document.body, width: 700, height: 500, title: 'Border Layout', layout: 'border', items: [{ title: 'South Region is resizable', region: 'south', // position for region height: 100, split: true, // enable resizing minSize: 75, // defaults to 50 maxSize: 150, margins: '0 5 5 5' },{ // xtype: 'panel' implied by default title: 'West Region is collapsible', region:'west', margins: '5 0 0 5', width: 200, collapsible: true, // make collapsible cmargins: '5 5 0 5', // adjust top margin when collapsed id: 'west-region-container', layout: 'fit', unstyled: true },{ title: 'Center Region', region: 'center', // center region is required, no width/height specified xtype: 'container', layout: 'fit', margins: '5 5 0 0' }] });
Ext.Panel è un componente di tipo container, il quale potrà contenere altri widget o altri container e a cui vengono applicati i layout.
Inoltre ogni pannello può contenere delle toolbar (top o bottom) e delle sezioni di header e footer, oltre alla sezione body.
Ad ogni componente ExtJS (i widget) è associato un xtype (una stringa identificativa) attraverso la quale ExtJS è in grado di istanziare dinamicamente i componenti a partire da una rappresentazione JSON delle caratteristiche dei componenti.
new Ext.Viewport({ layout: 'border', items: [{ region: 'north', html: '<h1 class="x-panel-header">Page Title</h1>', autoHeight: true, border: false, margins: '0 0 5 0' }, { region: 'west', collapsible: true, title: 'Navigation', xtype: 'treepanel', width: 200, autoScroll: true, split: true, loader: new Ext.tree.TreeLoader(), root: new Ext.tree.AsyncTreeNode({ expanded: true, children: [{ text: 'Menu Option 1', leaf: true }, { text: 'Menu Option 2', leaf: true }, { text: 'Menu Option 3', leaf: true }] }), rootVisible: false, listeners: { click: function(n) { Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"'); } } }, { id: 'my-tabpanel', region: 'center', xtype: 'tabpanel', items: { title: 'Default Tab', html: 'The first tab\'s content. Others may be added dynamically' } }, { region: 'south', title: 'Information', collapsible: true, html: 'Information goes here', split: true, height: 100, minHeight: 100 }] });
Ext.Viewport è un altro container, il cui scopo è occupare tutto lo spazio disponibile nel browser e ridimensionare di conseguenza tutti i componenti contanuti (attraverso il rendering engine interno a ExtJS)
Ext.TabPanel è un componente che estende Ext.Panel allo scopo di implementare la classica vista a Tab presente in molte applicazioni desktop classiche:
new Ext.TabPanel({ id: 'my-tabpanel', region: 'center', renderTo: document.body, items: { title: 'Default Tab', html: 'The first tab\'s content. Others may be added dynamically' } });
Nuovi Tab possono essere aggiunti e selezionati dinamicamente attraverso i metodi di TabPanel:
Ext.getCmp('my-tabpanel').add({
id: 'test-tab-1',
title: 'new tab',
html: 'some content'
});
Ext.getCmp('my-tabpanel').setActiveTab('test-tab-1');