Ext.extend在Extjs 中扮演着重大角色，是Extjs中幾個重要函數之一。要想深入瞭解EXTJS，這個函數非掌握不可,網上有很多關於這個函數的源碼分析和介紹方面的文章,這裏我只總結關於這個函數的使用的下幾種情況,不詳細分析這個函數的源碼。
Example one:
01 |
function
Base(config) { |
02 |
this.name=config.name; |
03 |
this.age=config.age; |
04 |
this.sex=config.sex; |
05 |
} |
06 |
07 |
function
base(config) { |
08 |
this.identity=config.identity; |
09 |
this.msg=config.msg; |
10 |
this.phone=config.phone; |
11 |
12 |
base.superclass.constructor.call(this,config); |
13 |
} |
14 |
15 |
Ext.extend(base,Base,{ |
16 |
showMsg:function(){ |
17 |
window.alert(this.name+'
'+this.age+' '+this.sex+' '+this.identity+' '+this.msg+' '+this.phone); |
18 |
} |
19 |
}); |
20 |
21 |
var
mybase=new base({ |
22 |
name:’’, |
23 |
age:’’, |
24 |
sex:’’, |
25 |
identity:’’, |
26 |
msg:’’, |
27 |
phone:’’ |
28 |
}); |
29 |
mybase.showMsg(); |
當在這種情況下的時候
此時Base是base父類,兩者均有自己的構造的函數.當採用這種方式構成繼承關係時,實例化base時將會先調用base constructor隨後調用Base constructor.在EXTJS中採用這種方式構造繼承關係例如
01 |
EXTUTIL.Observable
= function(){ |
02 |
03 |
var
me = this, e = me.events; |
04 |
if(me.listeners){ |
05 |
me.on(me.listeners); |
06 |
delete
me.listeners; |
07 |
} |
08 |
me.events
= e || {}; |
09 |
}; |
10 |
11 |
Ext.Component
= function(config){ |
12 |
13 |
//...此處省略 |
14 |
15 |
Ext.Component.superclass.constructor.call(this); |
16 |
17 |
//... |
18 |
19 |
} |
20 |
21 |
Ext.extend(Ext.Component,
Ext.util.Observable, { |
22 |
23 |
//... |
24 |
25 |
}); |
Example two:
01 |
function
Base(config) { |
02 |
this.name=config.name; |
03 |
this.age=config.age; |
04 |
this.sex=config.sex; |
05 |
} |
06 |
07 |
var
base=Ext.extend(Base,{ |
08 |
showMsg:function(){ |
09 |
window.alert(this.name+'
'+this.age+' '+this.sex+' '+this.identity+' '+this.msg+''+this.phone); |
10 |
} |
11 |
} |
當在這種情況下的時候
1 |
當var
mybase=new base( /* */); 將會調用Base constructor函數 |
此時Base是base的父類,實例化base時將會調用Base 的constructor.在EXTJS中採用這種方式構造繼承關係例如
1 |
Ext.Component
= function(config){ |
2 |
3 |
//... |
4 |
} |
5 |
6 |
Ext.BoxComponent
= Ext.extend(Ext.Component, { |
7 |
8 |
//... |
9 |
}); |
Example three :
01 |
function
Base(config) { |
02 |
this.name=config.name; |
03 |
this.age=config.age; |
04 |
this.sex=config.sex; |
05 |
} |
06 |
07 |
var
base=Ext.extend({ |
08 |
constructor:function(config){ |
09 |
this.identity=config.identity; |
10 |
this.msg=config.msg; |
11 |
this.phone=config.phone; |
12 |
13 |
base.superclass.constructor.call(this,config); |
14 |
}, |
15 |
showMsg:function(){ |
16 |
window.alert(this.name+'
'+this.age+' '+this.sex+' '+this.identity+' '+this.msg+''+this.phone); |
17 |
} |
18 |
} |
當在這種情況下的時候
1 |
此時
var mybase=new base( /* */); 將會調用 literal object 中的constructor。即上圖中的Ext.extend中傳入的constructor函數 |
此時Base是base的父類,實例化base時將會調用 literal object 中的constructor.在EXTJS中採用這種方式構繼承關係例如
01 |
Ext.data.DataWriter
= function(config){ |
02 |
Ext.apply(this,
config); |
03 |
}; |
04 |
05 |
Ext.data.JsonWriter
= Ext.extend(Ext.data.DataWriter, { |
06 |
07 |
encode
: true, |
08 |
09 |
encodeDelete:
false, |
10 |
11 |
constructor
: function(config){ |
12 |
Ext.data.JsonWriter.superclass.constructor.call(this,
config); |
13 |
}, |
14 |
15 |
//...此處省略 |
16 |
}); |
到此爲止,已經對Ext.extend三種使用情況作了相應總結.如果不明白,建議先看下有關這個函數源碼分析方面的文章,再使用Firebug多調試幾次就會明白