web-dev-qa-db-ja.com

Extjs：コンストラクターまたはinitComponentを介してクラスを拡張しますか？

Extjsでは、いつでもconstructor()を介してextjsクラスを拡張できます。 Componentから派生するクラスの場合、initComponent()を介して拡張することもできます。

なぜこれほど多くのコードがinitComponentを介して拡張されるのか、constructorが普遍的な拡張方法のように思われるのか疑問に思います。 initComponentはconstructorよりも明らかに有利ですか？

javascriptinheritanceextjsprototypal-inheritance
22
Exception e

まず、constructorを介してオーバーライドする機能がinitComponentよりも新しいバージョンのExtで追加されたため、特定の年齢のすべてのコードでinitComponentを使用する必要があります。最近では、何かをしたい場合はinitComponentをオーバーライドしますafter基本クラスのinitComponentが呼び出されます（コンストラクターはこれには早すぎます）が、beforeコンポーネントはレンダリングされます。多くの場合（最も一般的な構成の設定など）、どちらの方法でも実際には問題ではなく、ほとんどの人が最も便利なことを行います。ただし、それが重要な場合もあります。

18
Brian Moeskau

ExtJSバージョン4.0-4.2以降に関して更新された回答を試してみましょう。

constructor()はオブジェクト/クラス作成前メソッドです。そして、initComponent()はコンポーネントshowの前メソッドです。

constructor: function(config) {
  // ctor #1 - insert code here to modify config or run code to inject config
  // probably the cheapest place to make changes - before anything has been built

  this.callParent(arguments);

  // ctor #2 - insert code here if you need to make changes 
  // after everything has been rendered and shown, IIUC
},
initComponent: function() {
  // this function runs between ctor #1 and ctor #2

  // initComponent #1 - the UI component object tree is created,
  // (this object and child objects from config { items: [{...}]})
  // but they have not yet been rendered to DOM or shown.

  this.callParent(arguments);

  // initComponent #2 - I believe this is equivalent to ctor #2, 
  // I would prefer ctor as it is more universal.
}

子を持つパネルまたは複雑なレイアウトでは、コンポーネント（UIオブジェクトグラフ）を検査および操作する必要があるため、おそらくinitComponentを使用する必要があります。

ただし、個々のフォーム要素（コンボボックス、ボタンなど）については、コンストラクターを使用します。コンストラクターは、（複雑なオブジェクトの構築やDOMが変更される前に）軽量で、より普遍的であると考えています。 IOWコンストラクターは、単純なUI、モデル、およびデータストアに使用できます。後者の2つはinitComponentを使用できません。

そのため、理由がある場合にのみinitComponentを使用します。多くの場合、initComponent関数を作成するときに、子UIオブジェクトを操作しようとしています。次のステップは、その子コントロールを独自のExt.define（）に抽出し、カスタムコードを移動して子コントロールクラスで実行します。親パネルから複雑なinitを削除します。このプロセスを最新のページで4回繰り返しました。

12
yzorg

JayGarciaの著書ExtJSinActionからの関連する引用は次のとおりです。

initComponentは、Componentクラスのコンストラクター内で実行されますが、コンポーネントのいくつかの重要なセットアップタスクが実行された後でのみ実行されます。これらのタスクには、クラスのインスタンスへの構成オブジェクトプロパティのキャッシュと適用が含まれます。

そして後で、コンストラクターがインスタンスに適用される構成パラメーターに照らして：

サブクラスの構成済みインスタンスをcloneConfigを介して複製する必要がある場合は、コンストラクターを介して拡張するのが最善の選択です。

ちなみに、Jayの本はExtJS 3に関するものですが、cloneConfigはまだExtJS4に関連しているようです。見る：

http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Component-method-cloneConfig

そして

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-method-cloneConfig

2
Dexygen