From Learn About the Ext JavaScript Library

Contents 1 Introduzione 2 Ext.Component 3 Classi preconfigurate 4 Extending Ext.Component 5 Un modello riutilizzabile 6 Note Conclusive

Introduzione

In principio era Ext.extend() ed era cosa buona e giusta. Ext.extend() permette di costruire potenti gerarchie di classi. E' possibile usarlo per costruire le proprie classi base e derivate, oltre che per estendere le classi native di Ext. Se non avete familiarità con Ext.extend() dovreste leggere Manual:Intro:Inheritance.

Il Tutorial di Josef Sakalos Extending Ext Class è una bella guida passo passo all'utilizzo dell'ereditarietà fatto alla maniera di Ext 1.x. Vale la pena leggerlo visto che l'approccio definisci i tuoi costruttori funziona ancora in Ext 2.x e senza dubbio incontrerete codice precedente alla versione 2.x che utilizza questo approccio.

Ext.Component

Molti widget in Ext (Form, Panel, Toolbar, ..) derivano da Ext.component (e quelli che non lo fanno lo faranno nella versione 3 di Ext).

Classi preconfigurate

Il modo più semplice di estendere Ext.Component (o qualunque classe che ne derivi) consiste, come si faceva in Ext 1.x, nell'usare Ext.extend() (come nel tutorial di Jozef)l. La differenza è che non c'è bisogno di definire un costruttore ad hoc (ci pensa la funzione initComponent() di cui ci occuperemo più avanti in questo articolo). Se tutto quello di cui avete bisogno è definire una classe con dei vostri default (che qui e nella comunità ExtJS vengono chiamate Classi preconfigurate), tutto quello che dovrete fare è questo:

// Crea  MyComponent che è una versione preconfigurata di  Ext.some.component
MyComponent = Ext.extend(Ext.some.component, {
    myDefault1: '..',
    myDefault2: '..'
});
 
// registriamo un xtype per permettere l'inizializzazione lazy
Ext.reg('mycomponentxtype', MyComponent);

Nell'esempio qui sopra, il lettarale oggetto passato come secondo parametro ad Ext.extend() dovrebbe contenere i valori di default con cui sovrascrivere quelli delle opzioni di configurazione già supportate da Ext.some.component.

L'esempio qui soprà è ingannevolmente semplive ma permette di fare il refactoring di grandi blocchi di codice ripetuto trasformandolo in oggetti riutilizzabili. Per esempio, è possibile creare istanze di Ext.some.component con le personalizzazioni introdotte prima con il codice:

var myComponent = new MyComponent();

Oppure, in modalità lazy attraverso l' XType del componente precedentemente registrato, e.g. in una lista di item di un pannello via:

{..
   items: [ {xtype: 'mycomponentxtype'} ]
..}

Extending Ext.Component

Diciamocelo, le classi preconfigurate sono utili ma, finora, non abbiamo aggiunto funzionalità alle classi da cui stiamo ereditando. Per farlo dobbiamo sovrascrivere alcuni dei metodi ereditati. E' qui che ext 2.x comincia a brillare.

Ext.Component esiste fin dalla versione 1.x me nelle versioni 2.x è stato Ulteriormente espanso e migliorato, facendone uno delle classi principali di tutta l'architettura. Ora component fornisce un modello unificato per la creazione, la visualizzazione, la gestione degli eventi e degli stati oltre che la deallocazione, ed ogni componente in Ext che ha bisogno di queste caratteristiche deriva da Component. Ext_2_Overview#Component_Model.

Dovreste studiare il link qui sopra Ext_2_Overview, questo documento non è altro che una elaborazione di quanto scritto in quell'articolo. Scoprirete che leggendo il sorgente di Ext.Component (è nel file chiamato Component.js nella sottocartella widgets della cartella src di ExtJS - fate riferimento al mio articolo Ext Source Overview se non siete sicuri di dove trovarlo) Il codice può essere seguito riga per riga insieme con le spiegazioni passo passo del ciclo di vita di Component, Ext_2_Overview#Rendering eDistruzione. Tutta roba che vi aprirà gli occhi se vorrete cominciare a capire veramente cosa fa Ext dietro le quinte!

Adesso, visto che questo articolo riguarda l'estensione di Ext.Component, vorrete sapere che il metodo principale da estendere è initComponent() che è un protagonista del ciclo di vita di Component. Dopo aver imparato a gestire initComponent() potrete passare ad altri metodi importanti come onRender() che permette di estendere il Ext_2_Overview#Rendering, onDestroy() chiamato per gestire la Disallocazione etc..

Piuttosto che riscrivere quello che è stato scritto altrove, a questo punto mi limiterò a indicare alcune delle grandi risorse che sono state scritte da altri membri della comunità Ext.

Jozef Sakalos' Tutorial:Writing_a_Big_Application_in_Ext è una grande guida passo passo all'utilizzo del nuovo modello di ereditarietà di Component e del perché è indubbiamente una buona cosa per qualunque applicazione non banale.

Ancora Jozef Sakalos: il suo Tutorial:Extending_Ext2_Class è uno straordinario esempio preso da mondo reale da studiare ( il post di mjlecomte è una versione ancora più commentata dello stesso codice).

Un modello riutilizzabile

Qui sotto riporto un modello (ispirato a quello scritto da Josef Sakalos nel post di mjlecomte) da usare come guida per estendere la classe Ext.Component

MyComponent = Ext.extend(Ext.some.component, {
    // Prototype Defaults, can be overridden by user's config object
    propA: 1,
 
    initComponent: function(){
        // Chiamato durante l'inizializzazione del componente
 
        // L'oggetto di configurazione è già stato applicato a 'this' quindi 
        // le proprietà possono essere sovrascritte (es. items, tools, buttons)
        // oppure se ne possono aggiungere di nuove, ad esempio:
        Ext.apply(this, {
            propA: 3
        });
 
        // Before parent code
 
        // Invocare initComponent del genitore (necessario)
        MyComponent.superclass.initComponent.apply(this, arguments);
 
        // After parent code
        // e.g. install event handlers on rendered component
    },
 
    // Override other inherited methods 
    onRender: function(){
 
        // Before parent code
 
        // Invocare onRender del genitore (necessario)
        MyScope.superclass.onRender.apply(this, arguments);
 
        // After parent code
 
    }
});
 
// registriamo l' xtype per permettere l'inizializazzione lazy
Ext.reg('mycomponentxtype', MyComponent);

Un esempio illuminante, se aveste utilizzato la classe qui sopra con in codice seguente:

var myComponent = new MyComponent({
    propA: 2
});
// Or in modo lazy:
{..
  items: {xtype: 'mycomponentxtype', propA: 2}
..}

La proprietà propA sarebbe stata settata 3 volte a 1, 2 e 3 rispettivamente. Esaminando il codice (ed i commenti) vedreste che il valore parte a 1 (Default del prototipo), viene settato a 2 dalla configurazione dell'utente e sovrascritta un'ultima volta in initComponent con il valore 3. Spero che questo esempio sparga un po' di luce sull'ordine di esecuzione del codice (non nell'ordine in cui viene letto, dall'inizio alla fine!).

Visto che i componenti si innestano l'uno nell'altro ecco un metodo veloce per ottenere quello più esterno.

var topCmp = (function(o){while(o.ownerCt){o=o.ownerCt} return o;})(this);

Note Conclusive

Questo articolo si concentra particolarmente sul metodo initComponent() e sul suo ruolo nel ciclo di vita di Component. una volta acquistata maggiore familiarità potrete cominciare a esplorare altri aspetti del modello di Ext.Component (gestione di rendering, gestionde degli stati, plugin, etc.) che troverete elencati in Ext_2_Overview#Component_Model.

Mille grazie a Jozef Sakalos che ha scritto tutti i migliori tutorial e post sui forum riguardante quest'argomento, e naturalmente mille grazie anche a jack e il team di sviluppo per averci dato questo meraviglioso framework su cui costruire i nostri programmi. Non vedo l'ora che di vedere la prossima terza versione!