A、引言
ExtJS中继承实现是通过Ext.extend函数来实现的。
B、官方说明
以下是EXT-2.1中Ext.extend的说明
extend( Function subclass, Function superclass, [Object overrides] ) : Function
Extends one class with another class and optionally overrides members with the passed literal. This class also adds the function "override()" to the class that can be used to override members on an instance.
This function also supports a 2-argument call in which the subclass's constructor is not passed as an argument. In this form, the parameters are as follows:
superclass
The class being extended
overrides
A literal with members which are copied into the subclass's prototype, and are therefore shared among all instances of the new class.
This may contain a special member named constructor. This is used to define the constructor of the new class, and is returned. If this property is not specified, a constructor is generated and returned which just calls the superclass's constructor passing on its parameters.
For example, to create a subclass of the Ext GridPanel:
MyGridPanel = Ext.extend(Ext.grid.GridPanel, {
constructor: function(config) {
// Your preprocessing here
MyGridPanel.superclass.constructor.apply(this, arguments);
// Your postprocessing here
},
yourMethod: function() {
// etc.
}
});
Parameters:
subclass : Function
The class inheriting the functionality
superclass : Function
The class being extended
overrides : Object
(optional) A literal with members which are copied into the subclass's prototype, and are therefore shared between all instances of the new class.
Returns:
Function
The subclass constructor.
说明
extend( Function subclass, Function superclass, [Object overrides] ) : Function
第一个参数为子类，第一个参数为要继承的父类，第二个参数就是您自己要重写或添加的方法和属性。
C、举例说明
C.1、写法一
先定义子类（Function subclass）MyPanel。
MyPanel = function(){
调用MyPanel父类的构造器，并传递参数
MyPanel.superclass.constructor.call(this,{
title:'hello',
tbar:[{
text:'adduser',
handler:this.addUser,
scope:this
加这一行可以使addUser方法执行的环境发生变化
}]
});
};
通过第三个参数指定调用父类initComponent方法，并在并列的位置定义自己的方法
Ext.extend(MyPanel,Ext.Panel,{
initComponent:function(){
//Ext.apply(this);
MyPanel.superclass.initComponent.call(this);
},
addUser:function(){
alert(this.title);
}
});
C.2、写法二
MyPanel = Ext.extend(Ext.Panel,{
title:'test hello',
initComponent:function(){
Ext.apply(this,{
tbar:[{
text:'addUser',
handler:this.addUser,
scope:this
}]
});
MyPanel.superclass.initComponent.call(this);
},
addUser:function(){
alert(this.title);
}
});