ExtJs - La soluzione per interfacce web

ExtJs è una libreria Javascript, orientata agli oggetti, utilizzata per realizzare Graphical User Interface (GUI) complesse per web application. Inoltre si possono realizzare layout avanzati senza dover 'conoscere' i CSS e, se associate ad altri strumenti, queste web application possono diventare applicazioni del tutto simili a quelle desktop. ExtJs è un pacchetto realizzato da Sencha e disponibile con licenza open source (GNU GPLv3), a patto che sia citato e serva per realizzare un 'prodotto' a sua volta open source. Con questo pacchetto abbiamo a disposizione molti elementi o oggetti come: menu, pannelli, finestre, form, toolbar, tree e molti altri. Da sottolineare, inoltre, la completa compatibilità con tutti i browser. Gli elementi prima di essere utilizzati vanno dichiarati, come avviene nei comuni linguaggi di programmazione, attraverso la creazione di variabili (es: var nome = new Ext.NomeElemento). I più importanti elementi o oggetti sono: il ViewPort, il Panel, la Window e il TreePanel, e composti a loro volta da metodi, funzioni e attributi.

ViewPort
La classe Ext.ViewPort estende Ext.Container, ed è il 'contenitore' principale di tutta l'applicazione. Una applicazione o uno script dovrà contenerne solo una. La caratteristica principale di questo componente è forse quella di ridimensionarsi automaticamente sulla base della pagina web. Per indicare i 'figli', cioè il contenuto della ViewPort stessa si usa l'attributo items.

Panel
Ext.Panel estende anch'esso Ext.Container ed è alla base di ogni tipo di interfaccia. È forse il componente più semplice, può essere visto come il contenitore di altri elementi che andremo a inserire in seguito.

Window
estende Ext.Panel. Ext.Window non è altro che un pannello trascinabile (tramite l'utilizzo del comando draggable: true). Questo elemento rende le applicazioni web molto simili a quelle desktop utilizzate normalmente, viene visualizzato al di sopra di tutti gli altri elementi della pagina e può quindi essere chiusa tramite l'utilizzo dell'attributo closable che se indicato come true fa in modo di mostrare la window con un pulsante 'close'.

TreePanel
Ext.tree.TreePanel estende a sua volta Ext.Panel e serve per rappresentare le informazioni o le possibili istruzioni con una gerarchia ad albero e ovviamente deve avere un nodo iniziale, specificato tramite l'attributo root, da cui partono le gerarchie sottostanti.

Per dubbi e domande rimaniamo a vostra disposizione, basta che commentiate qui sotto. Alla prossima!

Visita il sito dell'autore: GANF.it