Ext.extend 详解

Ext.extend 详解

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();

当在这种情况下的时候

     

                                                                                                  图(1)

      此时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

}

当在这种情况下的时候

图(2)

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

}

 当在这种情况下的时候

图(3)

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多调试几次就会明白