Con questo CODE-IT impareremo ad inserire un editor di testo simile a Word nelle pagine HTML. Per farlo bastano poche righe di javascript scritte grazie alla libreria Ext.js. Nel nostro editor potremo anche copiare il contenuto da altre pagine html o da file word presenti sul nostro computer. Per questo code-it abbiamo usato la componente di Ext che si chiama htmleditor, e che ci permette di formattare del testo.

Il file word.html conterrà pochissime righe. Il necessario per poter far funzionare la libreria Ext e un tag div chiamato word, che utilizzeremo come contenitore del nostro modulo word grazie al javascript contenuto in word.js . Così facendo, gran parte del lavoro è già svolto da Ext. Pertanto, aver incluso la terna: ext-all.css, ext-base.js, ext-all.js; ci aiuta ad impostare la nostra pagina perché possa usare a pieno le potenzialità del framework.

<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>

<div id="word"></div>

Nelle prime istruzioni incluse nel nostro file javascript, inseriremo del codice utile a settare quale tema di Ext preferiamo. Nel nostro esempio abbiamo scelto il tema gray.

Ext.util.CSS.swapStyleSheet('theme', 'ext/resources/css/xtheme-gray.css');

Andremo poi a definire gli attributi del form che conterrà le voci del nostro foglio. Per far stare la pagina a tutto schermo, indipendentemente dalle dimensioni e dalla risoluzione dell'utente che le visualizzerà, abbiamo inserito l'attributo Ext.getBody().getViewSize().height.

	height:Ext.getBody().getViewSize().height,

Di seguito inseriremo nell'array items gli oggetti che vogliamo andare a definire nel form. Metteremo un textfield per l'autore, uno per il titolo e finalmente andremo ad inserire la textarea con testo formattato simile a Word grazie alla componente htmleditor. Con l'attributo anchor, definiremo quanto deve essere grande la componente. Quando scriviamo un solo valore nell'anchor, questo va a incidere sulla percentuale di occupazione in larghezza. Se ne inseriamo due, il secondo valore va a incidere sulla percentuale di occupazione in altezza.

        items: [
			{
                layout: 'form',
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'Titolo',
                    name: 'titolo',
                    anchor:'95%'
                }, {
                    xtype:'textfield',
                    fieldLabel: 'Autore',
                    name: 'autore',
                    anchor:'95%'
                }]
			},{
				xtype:'htmleditor',
				id:'testo',
				fieldLabel:'Testo',
				
			  	anchor:'98% 85%'
			}]

Come ultima cosa per quanto riguarda la parte client del nostro codice, andremo a inserire il codice utile a far comparire due pulsanti per gestire i dati inseriti nel form. Tramite l'attributo buttons, definiremo le varie caratteristiche dei nostri bottoni. In particolare, abbiamo definito le proprieta' text e handler. Con text definiamo il testo del pulsante, con handler il suo comportamento.

Ecco quindi che il nostro editor di testo si è andato a comporre in maniera molto pulita e semplice. Possiamo giocare con i contenuti complessi che andiamo a creare. Definire link, vedere il codice sorgente dell'html che abbiamo descritto, inserirvi anche dei media complessi, come video o applicazioni flash. Possiamo addirittura usare una pagina come questa per scrivere in maniera visuale il codice delle nostre pagine html.