Extjs extend

学习和使用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.希望这个例子能让你稍微明白代码执行的顺序（而不是按照你读代码的顺序！）。