Ext.extend在Extjs 中扮演着重大角色,是Extjs中几个重要函数之一。要想深入了解EXTJS,这个函数非掌握不可,网上有很多关于这个函数的源码分析和介绍方面的文章,这里我只总结关于这个函数的使用的下几种情况,不详细分析这个函数的源码。
Example one:
01 | function Base(config) { |
02 | this.name=config.name; |
07 | function base(config) { |
08 | this.identity=config.identity; |
10 | this.phone=config.phone; |
12 | base.superclass.constructor.call(this,config); |
15 | Ext.extend(base,Base,{ |
17 | window.alert(this.name+' '+this.age+' '+this.sex+' '+this.identity+' '+this.msg+' '+this.phone); |
当在这种情况下的时候
![](https://i-blog.csdnimg.cn/blog_migrate/b23cd2d49f8b7c747472e522637b2aaf.gif)
此时Base是base父类,两者均有自己的构造的函数.当采用这种方式构成继承关系时,实例化base时将会先调用base constructor随后调用Base constructor.在EXTJS中采用这种方式构造继承关系例如
01 | EXTUTIL.Observable = function(){ |
03 | var me = this, e = me.events; |
11 | Ext.Component = function(config){ |
15 | Ext.Component.superclass.constructor.call(this); |
21 | Ext.extend(Ext.Component, Ext.util.Observable, { |
Example two:
01 | function Base(config) { |
02 | this.name=config.name; |
07 | var base=Ext.extend(Base,{ |
09 | window.alert(this.name+' '+this.age+' '+this.sex+' '+this.identity+' '+this.msg+''+this.phone); |
当在这种情况下的时候
![](https://i-blog.csdnimg.cn/blog_migrate/33f28aaaa4049830b05bd568a1aa69cc.gif)
1 | 当var mybase=new base( /* */); 将会调用Base constructor函数 |
此时Base是base的父类,实例化base时将会调用Base 的constructor.在EXTJS中采用这种方式构造继承关系例如
1 | Ext.Component = function(config){ |
6 | Ext.BoxComponent = Ext.extend(Ext.Component, { |
Example three :
01 | function Base(config) { |
02 | this.name=config.name; |
08 | constructor:function(config){ |
09 | this.identity=config.identity; |
11 | this.phone=config.phone; |
13 | base.superclass.constructor.call(this,config); |
16 | window.alert(this.name+' '+this.age+' '+this.sex+' '+this.identity+' '+this.msg+''+this.phone); |
当在这种情况下的时候
![](https://i-blog.csdnimg.cn/blog_migrate/242136ea5b61d63a70bba50213d2ccf4.gif)
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); |
05 | Ext.data.JsonWriter = Ext.extend(Ext.data.DataWriter, { |
11 | constructor : function(config){ |
12 | Ext.data.JsonWriter.superclass.constructor.call(this, config); |
到此为止,已经对Ext.extend三种使用情况作了相应总结.如果不明白,建议先看下有关这个函数源码分析方面的文章,再使用Firebug多调试几次就会明白