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

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)

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