Ext.extend 详解

最新推荐文章于 2014-08-22 14:54:41 发布

weixin_30703911

最新推荐文章于 2014-08-22 14:54:41 发布

阅读量224

点赞数 1

原文链接：http://www.cnblogs.com/yin-jingyu/archive/2011/07/29/2121127.html

版权

本文总结了Ext.extend在Ext.js中的三种使用情况：第一种情况涉及两个类之间的继承，其中子类调用父类和自身构造函数；第二种情况仅涉及一个类的构造函数；第三种情况通过传递构造函数来实例化类。这些情况适用于理解Ext.js的继承机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

当在这种情况下的时候

图(1)

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

当在这种情况下的时候

图(2)

`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}

当在这种情况下的时候

图(3)

 
      1此时 var mybase=new base( /* */);  将会调用 literal object 中的constructor。即上图中的Ext.extend中传入的constructor函数

此时Base是base的父类,实例化base时将会调用 literal object 中的constructor.在EXTJS中采用这种方式构继承关系例如

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