ExtJSで実際にアプリを開発しだすとすぐに、コンポーネントを拡張し、自作クラス・コンポーネントを作りたくなります。
xtypeとかも用意して、他に組み込みしやすしたりなどなど。
この拡張方法ですが、Ext.extend()を利用するわけですが、どうもコツがいるようです。

例：Ext.Panelを拡張したコンポーネント。MyComponentを作成する。xtypeはmycomponentで登録しておく。

MyComponent = Ext.extend(Ext.Panel, {
    initComponent: function(){
        Ext.apply(this, {
            _name: 'MyComponent'　　// 特に必要ないが、デバッグ時にconsole.logなどでオブジェクトの名前が見えるので、書いとくと便利。
        });
        this.items = [{ //itemsは必ずここで設定。
        }];
        MyComponent.superclass.initComponent.call(this);
    }
});
// xtypeの登録。これで、xtype:'mycomponent'の指定で遅延レンダリングができる。
Ext.reg('mycomponent', MyComponent);

上記コードの解説
１．initComponent関数
コンポーネントの初期化を行う関数。ただし、これはいわゆるnewしたときに実行されるコンストラクタとは異なる。実際は、ComponentのコンストラクタからinitComponentは実行されるのでそのタイミングが影響していくつかの設定は、initComponntで設定する必要が出てくる。
- レイアウトに関連する設定は必ずinitComponentの中で行う。
- collapsible はオブジェクトリテラルで設定する。

items:[
	{
		xtype:'mycomponent',
		collapsible:true
	}
]

２．Ext.reg
Ext.reg(xtypeとしての登録する名前,オブジェクト)
となる。任意のコンポーネントに、上記MyComponentを配置する際に、xtypeによる遅延レンダリングを利用できるようになる。

３．initComponent内のthisは、上記ならMyComponentのインスタンスを示しています。
４．new MyComponent(config)としてインスタンス化したら、initComponent内ではthisにapplyされている。
５．Ext.apply(object1,object2)
これは、object1に対し、object2をマージするイメージ。これで、object2が持っている要素はobject1に取り込まれるます。オブジェクトの合体！！！といった感じ。

Tweet