Extのコンポーネントを拡張します.

ことばを引く
最初は、Ext.exted()がよくやっていました.強いJavaScriptクラスの階層構造を作ることができます.あなたはそれを使って自分のクラスと派生クラスを構築することができます.もちろん、Extの内部建設クラスを拡張することもできます.Ext.extedに慣れていないなら、まず読んでください.Manual:Intro:Inheitance.
ジョゼフSakalosが書いたTutorial:Extensding_Ext_クラスExt 1.Xで継承できる方法を詳しく紹介しました.自己建築の構造関数はExt 2.Xの下でまだ仕事ができます.そして、あなたは2.X以前の構造方式のコードに出会うかもしれません.
Ext.Component
ほとんどのExtウィンドウの小さい部品(例えばForm elemens、Panels、Toolbars、.)はExt.
事前設定クラス
最も簡単な拡張Ext.Componentの方式(または任意のクラスから引き継ぐ)は、Ext.XにおけるExt.exted()の利用を継続することである.しかし、もう一つの違いは、あなたが自分の構造関数を定義する必要がないということです.もしあなたが必要とするのがいくつかの自分のデフォルトクラスを定義して再利用する場合(こことExtJSコミュニティをプリコンフィギュレーションクラスとして指す)、あなたが必要とするのはすべてです.

//    Ext.some.component     MyComponent
MyComponent = Ext.extend(Ext.some.component, {
    myDefault1: '..',
    myDefault2: '..'
});
 
//   xtype      
Ext.reg('mycomponentxtype', MyComponent);

上記の例では、Ext.exted()の2番目のパラメータオブジェクトに含まれるカスタムパラメータは、Ext.some.com onentでサポートされているデフォルトパラメータをカバーすることができる.
上記の例は簡単に見えるが、相当数の重複コードをプログラムから再構成して再利用可能なオブジェクトを生成することができる.例を挙げると、事前設定オプションでExt.some.com.mponentの一例を作成できます.コードは以下の通りです.

var myComponent = new MyComponent();

または登録されたExt 3遅延負荷により、以下の例をPanelのコンポーネント項目とします.

{..
   items: [ {xtype: 'mycomponentxtype'} ]
..}

Ext.Componentを拡張します.
はい、プリコンフィギュレーションは有用ですが、まだ他の機能を追加していません.私たちはいくつかの方法をカバーして実装する必要があります.これはExt 2.Xの素晴らしいところです.
Ext.Componentは1.xから発生しましたが、2.xでは、拡張と強化を得て、全体のアーキテクチャの中で最も基本的なクラスになりました.現在、コンポーネントは統一したコンポーネントの作成、レンダリング、イベント処理、状態維持、廃棄モデルを提供しています.そして、Extの各コンポーネントは、これらの特性が必要とされる現在はComponentから拡張されています.Component XType
上のExt_2_Overview落Component_Modelコンポーネントの四角い面をよく勉強してください.行のトレースがExt.Componentのソースコード(ExtJSのSrcディレクトリの下のWidgetsサブディレクトリの下のComponent.jsの中で)である場合、あなたは分かります.
現在、本文ではExt.Componentの拡張について、主に注目するべき方法はinit Component()であり、Ext_2_Overview(コンポーネントライフサイクル)で主要な役割を果たしていますが、init Component()を把握した後、他の重要な方法を研究し続けてください.この面では、Extコミュニティのメンバーによって書かれた非常に良い文書を指摘します.
ジョゼフSakalosが書いたthe Component Life Cycleとてもいい教程です.新しいコンポーネントを使ってモデルを継承することを教えてくれます.
Jozef SakalosによるExt_2_Overview((zhi Rendering)実際の例を紹介しています.
再利用可能なテンプレート
下のテンプレート(Jozef Sakalosによるmjlecommte'sExt_2_Overview((zhu Destruction)における回答)は、Ext.

MyComponent = Ext.extend(Ext.some.component, {
    //      ，         
    propA: 1,
 
    initComponent: function(){
       //             
 
        //          “this”，            ，        
        //（ items,tools,buttons）
        Ext.apply(this, {
            propA: 3
        });
 
       //         
 
        //        （  ）
        MyComponent.superclass.initComponent.apply(this, arguments);
 
       //        
        // ：           
    },
 
    //        
    onRender: function(){
 
        //        
 
        //        （  ）
        MyScope.superclass.onRender.apply(this, arguments);
 
        //        
 
    }
});
 
//   xtype        
Ext.reg('mycomponentxtype', MyComponent);

上記は啓発例です.以下のいずれかの例で上記のコードを作成する場合:

var myComponent = new MyComponent({
    propA: 2
});
//      :
{..
  items: {xtype: 'mycomponentxtype', propA: 2}
..}

属性propAは3回に設定され、それぞれ1、2、3の順に設定されます.コード(コメント)を追跡することで、初期値は1であることが分かります.その後、ユーザー設定オブジェクトを2に設定し、最後にinitComponentメソッドで上書きして3に設定します.コードを読む順番ではなく、この例によって、コードが実行される順番が少し分かります.
コンポーネントは他のコンポーネントの基本ですので、下のコードは基本的なコンポーネントのショートカットを取得する方法です.

var topCmp = (function(o){while(o.ownerCt){o=o.ownerCt} return o;})(this);

結尾語
本稿では主にinitComponent()方法とその在the Component Life Cycle中の役に注目します.それを把握すると、この研究Ext_2_Overview((zhi Rendering)リストされているExtコンポーネントモデルの他の側面(例えば、レンダリング、状態管理、プラグインなど)を管理します.Jozef Sakalosに感謝しています.彼はコンポーネントの拡張についての素晴らしい書き込みと教程を発表しました.もちろん、JackとExtチームに感謝します.このような素晴らしい枠組みを提供してくれました.Ext 3が私たちに何をもたらしたのか見てみたいです.NewPP limit report Prprocessor node count:107/100000 Post-expand include size:1782/2097152 bytes Template argment size:1188/2097152 bytes Expensive parser function count:0/100---!Saved in parser cache with key ext_learn:pcache:idhash:828-0!1!0はい2です.edit=0 and timestamp 201019084925-->
Retrieved from"
Ext_2_Overview((zhu Destruction)「