Extjs- Ext.Extend函数的使用

来源：互联网发布：office mac 安装教程编辑：程序博客网时间：2024/05/17 06:43

Ext.extend在Extjs 中扮演着重大角色，是Extjs中几个重要函数之一。要想深入了解EXTJS，这个函数非掌握不可,网上有很多关于这个函数的源码分析和介绍方面的文章,这里我只总结关于这个函数的使用的下几种情况,不详细分析这个函数的源码。

Example one:

01function Base(config) {
02  this.name=config.name;
03  this.age=config.age;
04  this.sex=config.sex;
05}
06 
07function 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 
15Ext.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中采用这种方式构造继承关系例如

01EXTUTIL.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 
11Ext.Component = function(config){
12 
13  //...此处省略
14 
15 Ext.Component.superclass.constructor.call(this);
16 
17 //...
18 
19}
20 
21Ext.extend(Ext.Component, Ext.util.Observable, {
22 
23 //...
24 
25});

Example two:

01function Base(config) {
02this.name=config.name;
03this.age=config.age;
04this.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中采用这种方式构造继承关系例如

1Ext.Component = function(config){
2 
3  //...
4}
5 
6Ext.BoxComponent = Ext.extend(Ext.Component, {
7 
8 //...
9});

Example three :

01function Base(config) {
02this.name=config.name;
03this.age=config.age;
04this.sex=config.sex;
05 }
06 
07var 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},
15showMsg:function(){
16window.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中采用这种方式构继承关系例如

view source
print?
01Ext.data.DataWriter = function(config){
02    Ext.apply(this, config);
03};
04 
05Ext.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多调试几次就会明白