學習和使用extjs也一段時間了，在這裏把學習ext中extend的總結寫下來，方便以後查閱，也希望爲像我這樣的學習者有所幫助，廢話少說，開始了；
1 ext 1.x中的extend：
Java代碼
MyNewClass = function(arg1, arg2, etc) {
//調用父類（基類）構造器
MyNewClass.superclass.constructor.call(this, arg1, arg2, etc);
};
Ext.extend(MyNewClass, SomeBaseClass, {
theDocument: Ext.get(document),
myNewFn1: function() {
// etc.
},
myNewFn2: function() {
// etc.
}
});
MyNewClass = function(arg1, arg2, etc) {
//調用父類（基類）構造器
MyNewClass.superclass.constructor.call(this, arg1, arg2, etc);
};
Ext.extend(MyNewClass, SomeBaseClass, {
theDocument: Ext.get(document),
myNewFn1: function() {
// etc.
},
myNewFn2: function() {
// etc.
}
});
下面在貼一段詳細的代碼，詳細信息查看http://extjs.com/learn/Manual:Intro:Inheritance
Java代碼
// 創建新類的構造器
Ext.ResizableConstrained = function(el, config){
Ext.ResizableConstrained.superclass.constructor.call(this, el, config);
};
// 繼承父類（基類）
Ext.extend(Ext.ResizableConstrained, Ext.Resizable, {
setXConstraint : function(left, right){
// Obtain a reference to parent dd property and setXConstraint
this.dd.setXConstraint(left, right);
},
setYConstraint : function(up, down){
// Obtain a reference to parent dd property and setYConstraint
this.dd.setYConstraint(up, down);
}
});
// 創建新類的實例
var myResizable = new Ext.ResizableConstrained('resize-el', {
width: 200,
height: 75,
minWidth:100,
minHeight:50,
maxHeight:150,
draggable:true
});
// 調用新類中的方法
myResizable.setYConstraint(0,300);
myResizable.setXConstraint(0,300);
// 創建新類的構造器
Ext.ResizableConstrained = function(el, config){
Ext.ResizableConstrained.superclass.constructor.call(this, el, config);
};
// 繼承父類（基類）
Ext.extend(Ext.ResizableConstrained, Ext.Resizable, {
setXConstraint : function(left, right){
// Obtain a reference to parent dd property and setXConstraint
this.dd.setXConstraint(left, right);
},
setYConstraint : function(up, down){
// Obtain a reference to parent dd property and setYConstraint
this.dd.setYConstraint(up, down);
}
});
// 創建新類的實例
var myResizable = new Ext.ResizableConstrained('resize-el', {
width: 200,
height: 75,
minWidth:100,
minHeight:50,
maxHeight:150,
draggable:true
});
// 調用新類中的方法
myResizable.setYConstraint(0,300);
myResizable.setXConstraint(0,300);
重寫父類（基類）中的方法
Java代碼
MyClass = Ext.extend(Ext.SomeClass, {
someFunction : function(arg1, arg2){
// custom code
// call base class
MyClass.superclass.someFunction.call(this, arg1, arg2);
// custom code
}
);
MyClass = Ext.extend(Ext.SomeClass, {
someFunction : function(arg1, arg2){
// custom code
// call base class
MyClass.superclass.someFunction.call(this, arg1, arg2);
// custom code
}
);
2 ext 2.0中的extend：
下面以繼承Ext.Component爲例，詳細查看：http://extjs.com/learn/Manual:Component:Extending_Ext_Components(Chinese)
2.1如果你所需的是定義一些自己的缺省類來重用（指的是這裏和ExtJS社區作爲預配置類），所有你所需要做的就是：
Java代碼
//定義組件Ext.some.component的預配置類MyComponent
MyComponent = Ext.extend(Ext.some.component, {
myDefault1: '..',
myDefault2: '..'
});
//註冊成xtype以便延遲加載
Ext.reg('mycomponentxtype', MyComponent);
//定義組件Ext.some.component的預配置類MyComponent
MyComponent = Ext.extend(Ext.some.component, {
myDefault1: '..',
myDefault2: '..'
});
//註冊成xtype以便延遲加載
Ext.reg('mycomponentxtype', MyComponent);
在以上示例中，Ext.extend()中的第二個參數對象包含的自定義參數可覆蓋Ext.some.component中已經支持的缺省參數。
以上示例看上去較簡單，但能夠讓你從程序中重構除去相當數量重複的代碼，並生成可重用的對象。舉個例子，你可以用預配置選項創建一個Ext.some.component的實例，代碼如下：
Java代碼
var myComponent = new MyComponent();
var myComponent = new MyComponent();
或者通過你註冊過的Component XType延遲加載，下面示例作爲Panel的組件項：
Java代碼
{..
items: [ {xtype: 'mycomponentxtype'} ]
..}
{..
items: [ {xtype: 'mycomponentxtype'} ]
..}
擴展Ext.Component的，主要關注的方法應是initComponent()，在the Component Life Cycle（組件生命週期）中扮演了首要角色，在你掌握了initComponent() 後，你可以繼續研究其他重要的方法，如onRender()，使你能夠擴展Ext_2_Overview#Rendering，onDestroy() 用來擴展Ext_2_Overview#Destruction
一個可重用模板
下面的模板可作爲擴展Ext.Component的起點。
Java代碼
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);
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);
如果你用以下任意例子創建以上代碼的實例 ：
Java代碼
var myComponent = new MyComponent({
propA: 2
});
//或者延遲加載:
{..
items: {xtype: 'mycomponentxtype', propA: 2}
..}
var myComponent = new MyComponent({
propA: 2
});
//或者延遲加載:
{..
items: {xtype: 'mycomponentxtype', propA: 2}
..}
屬性propA將被設置3次，按順序分別是1，2，3 。通過跟蹤代碼（和註釋） ，你會發現初始值爲1（構造缺省），然後通過用戶配置對象設置爲2，最後在initComponent方法中被覆蓋設置成3.希望這個例子能讓你稍微明白代碼執行的順序（而不是按照你讀代碼的順序！）。
