extjs - extjs4.1 での initComponent 関数の使用は何ですか?

Question

initComponentextjs4.1 で関数がどのように使用されているか教えてもらえますか? 例を挙げてください

ありがとう

Answer 1

constructorこのメソッドはfor コンポーネントに似ています。これは true によって呼び出されconstructor、コンポーネントの初期化をカスタマイズするための非常に優れたフック ポイントです (名前が示すように!)。

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

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

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

そうは言っても、 ではレンダリングが行われないことに注意してinitComponentください。子コンポーネントは作成および構成されていますが、それらの DOM 要素は作成されていません。afterRenderレンダリングに影響を与えるには、レンダリング関連のイベントを使用するか、またはメソッドを探す必要がありonRenderます...

以下に図解による要約を示します。

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