Qual è l'uso della funzione initComponent in extjs4.1?

Question

Qualcuno può dirmi quale sia l'uso della funzione initComponent in extjs4.1? Si prega di fornire un esempio

Grazie

Answer 1

Questo metodo è simile a un constructor per i componenti. È chiamato dal vero constructor ed è un ottimo punto di aggancio per personalizzare l'inizializzazione del componente (come detto nel nome!).

Tranne in alcune rare occasioni, è necessario sostituire lo initComponent anziché lo constructor perché l'inizializzazione di base avrà già luogo. In particolare, l'oggetto di configurazione passato al costruttore sarà già stato fuso nell'oggetto.

Supponiamo di voler personalizzare la configurazione di un componente, ad esempio impostando il suo width. Se provi a farlo nel costruttore, dovrai prima controllare se abbiamo passato o meno un oggetto di configurazione (per evitare di provare a impostare una proprietà su undefined) e avrai l'override dell'oggetto config che è una cattiva pratica Se si imposta l'opzione in this, questo potrebbe essere sovrascritto dall'oggetto config. Se modifichi il valore nell'oggetto config, modifichi l'oggetto, rompendo le aspettative dal codice chiamante (ad esempio riutilizzando l'oggetto config avrà un risultato imprevisto). In initComponent, il valore sarà sempre this.width, non è necessario preoccuparsi della configurazione.

Un altro punto interessante è che initComponent è il luogo in cui vengono creati i componenti figlio (per contenitore), negozi, viste, modelli, ecc. Quindi, prima di chiamare il metodo superclasse initComponent, puoi agire in base al fatto che non sono già stati utilizzati o necessari (ad esempio aggiungere articoli, creare il negozio, ecc.). D'altra parte, una volta chiamato il metodo super, è garantito che tutte queste dipendenze sono state create e istanziate. Ad esempio, è il buon posto per aggiungere listener alle dipendenze.

Detto questo, tenere presente che nessun rendering è in corso in initComponent. I componenti figlio vengono creati e configurati, ma i loro elementi DOM non sono stati creati. Per influenzare il rendering, si dovrà utilizzare il rendering eventi correlati o cercare le afterRender o onRender metodi ...

Ecco una sintesi illustrata:

constructor: function(config) { 

    // --- Accessing a config option is very complicated --- 

    // unsafe: this may be changed by the passed config 
    if (this.enableSomeFeature) { ... } 

    // instead, you would have to do: 
    var featureEnabled; 
    if (config) { // not sure we've been passed a config object 
     if (Ext.isDefined(config.featureEnabled)) { 
      featureEnabled = config.featureEnabled; 
     } else { 
      featureEnabled = this.enableSomeFeature; 
     } 
    } else { 
     featureEnabled = this.enableSomeFeature; 
    } 
    // now we know, but that wasn't smooth 
    if (featureEnabled) { 
     ... 
    } 


    // --- Even worse: trying to change the value of the option --- 

    // unsafe: we may not have a config object 
    config.enableSomeFeature = false; 

    // unsafe: we are modifying the original config object 
    (config = config || {}).enableSomeFeature = false; 

    // cloning the config object is safe, but that's ineficient 
    // and inelegant 
    config = Ext.apply({enableSomeFeature: false}, config); 


    // --- Super method --- 

    this.callParent(arguments); // don't forget the arguments here! 

    // -------------------- 

    // here initComponent will have been called 
} 

,initComponent: function() { 

    // --- Accessing config options is easy --- 

    // reading 
    if (this.enableSomeFeature) { ... } 

    // or writing: we now we change it in the right place, and 
    // we know it has not been used yet 
    this.deferRender = true; 


    // --- Completing or changing dependant objects is safe --- 
    // items, stores, templates, etc. 

    // Safe: 
    // 1. you can be sure that the store has not already been used 
    // 2. you can be sure that the config object will be instantiated 
    // in the super method 
    this.store = { 
     type: 'json' 
     ... 
    }; 


    // --- However that's too early to use dependant objects --- 

    // Unsafe: you've no certitude that the template object has 
    // already been created 
    this.tpl.compile(); 


    // --- Super method --- 

    this.callParent(); 

    // -------------------- 


    // Safe: the store has been instantiated here 
    this.getStore().on({ 
     ... 
    }); 


    // will crash, the element has not been created yet 
    this.el.getWidth(); 
}