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

当在这种情况下的时候

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

当在这种情况下的时候

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 }

当在这种情况下的时候

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

阅读更多
个人分类: ExtJs
想对作者说点什么? 我来说一句

表格控件讲解技术

2013年06月28日 895KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭