Jaki jest pożytek z funkcji initComponent w extjs4.1?

Question

Czy ktoś może mi powiedzieć, co korzystanie z funkcji initComponent jest w extjs4.1? Proszę podać przykład

Dzięki

Answer 1

Metoda ta jest zbliżona do constructor komponentów. Nazywana jest przez prawdziwą constructor i jest naprawdę dobry punkt hak dostosować inicjalizacji komponentu (jak powiedział w nazwie!).

Z wyjątkiem bardzo rzadkich okazji, należy zastąpić initComponent zamiast constructor, ponieważ bardziej podstawowa inicjalizacja będzie już miała miejsce. Przede wszystkim obiekt config przekazany do konstruktora zostanie już scalony z obiektem.

Powiedzmy chcesz dostosować konfigurację komponentu, jak ustawienie jego width. Jeśli próbujesz zrobić w konstruktorze, musisz najpierw sprawdzić, czy mamy już przeszły obiekt config lub nie (w celu uniknięcia próbuje ustawić właściwość na undefined), a będziesz miał zastąpić obiekt config która jest złą praktyką. Jeśli ustawisz opcję na this, może to zostać przesłonięte przez obiekt config. Jeśli zmienisz wartość w obiekcie config, zmodyfikujesz obiekt, przerywając oczekiwanie na kod wywołujący (tj. Ponowne użycie obiektu konfiguracyjnego będzie miało nieoczekiwany wynik). W initComponent wartość zawsze będzie this.width, nie trzeba się martwić o config.

Innym interesującym punktem jest to, że initComponent jest miejscem, w którym tworzone są komponenty potomne (do kontenera), sklepy, widok, szablony itp. Tak więc, przed wywołaniem nadklasę initComponent metody, można działać na tych będąc pewien, że nie zostały już wykorzystane lub potrzebne (na przykład dodawanie elementów, tworząc sklep itp.) Z drugiej strony, po wywołaniu metody super, masz gwarancję, że wszystkie te zależności zostały utworzone i utworzone. To jest dobre miejsce na przykład do dodawania słuchaczy do zależności.

Należy jednak pamiętać, że renderowanie nie ma miejsca w przypadku initComponent. Składniki potomne są tworzone i konfigurowane, ale ich elementy DOM nie zostały utworzone. Wpływać na renderowania, będziesz musiał użyć renderowania podobnych zdarzeń lub szukać afterRender lub onRender metod ...

Oto ilustruje zestawienie:

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(); 
}