2013-06-05 9 views

答えて

9

を提供してください。それは本当にconstructorによって呼び出され、コンポーネントの初期化をカスタマイズするための本当に良いフックポイントです(名前のとおり!)。

非常にまれな場合を除き、constructorの代わりにinitComponentをオーバーライドする必要があります。これは、より基本的な初期化が既に行われているためです。特に、コンストラクタに渡されるconfigオブジェクトは、すでにオブジェクトにマージされています。

コンポーネントの設定をカスタマイズする場合は、widthのように設定します。コンストラクタでそれを実行しようとすると、最初にconfigオブジェクトを渡したかどうかをチェックしなければなりません(undefinedにプロパティを設定しようとするのを避けるため)、configオブジェクトをオーバーライドしますそれは悪い習慣です。 thisにオプションを設定すると、その設定オブジェクトによってオーバーライドされる可能性があります。設定オブジェクトの値を変更した場合は、オブジェクトを変更して呼び出しコードから期待値を外します(つまり、設定オブジェクトを再利用すると予期せぬ結果になる)。 initComponentでは、値は常にthis.widthになるため、設定について心配する必要はありません。

さらに興味深い点は、initComponentは、子コンポーネント(コンテナ用)、ストア、ビュー、テンプレートなどが作成される場所です。したがって、スーパークラスinitComponentメソッドを呼び出す前に、まだ使用されていないか、必要でないことを確認することができます(アイテムの追加、店舗の作成など)。一方、スーパーメソッドを呼び出すと、すべての依存関係が作成され、インスタンス化されていることが保証されます。したがって、リスナーを依存関係に追加するのに適しています。

と言われていますが、initComponentにはレンダリングが行われていません。子コンポーネントは作成され、構成されますが、DOM要素は作成されていません。レンダリングに影響を与えるために、あなたは、レンダリング関連イベントを使用するか、またはafterRenderonRender方法を探して...

する必要がありますここで示す要約です:

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(); 
} 
は、
関連する問題