Extjs- Ext.extend函数的使用

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

Example one:

function Base(config) {
  this.name=config.name;
  this.age=config.age;
  this.sex=config.sex;
}

function base(config) {
 this.identity=config.identity;
 this.msg=config.msg;
 this.phone=config.phone;

 base.superclass.constructor.call(this,config);
}

Ext.extend(base,Base,{
   showMsg:function(){
     window.alert(this.name+' '+this.age+' '+this.sex+' '+this.identity+' '+this.msg+' '+this.phone);
   }
});

 var mybase=new base({
       name:’’,
       age:’’,
       sex:’’,
       identity:’’,
       msg:’’,
       phone:’’
 });
 mybase.showMsg();

当在这种情况下的时候

此时Base是base父类,两者均有自己的构造的函数.当采用这种方式构成继承关系时,实例化base时将会先调用base constructor随后调用Base constructor.在EXTJS中采用这种方式构造继承关系例如

EXTUTIL.Observable = function(){

    var me = this, e = me.events;
    if(me.listeners){
        me.on(me.listeners);
        delete me.listeners;
    }
    me.events = e || {};
};

Ext.Component = function(config){

  //...此处省略

 Ext.Component.superclass.constructor.call(this);

 //...

}

Ext.extend(Ext.Component, Ext.util.Observable, {

 //...

});

Example two:

function Base(config) {
this.name=config.name;
this.age=config.age;
this.sex=config.sex;
 }

 var base=Ext.extend(Base,{
   showMsg:function(){
     window.alert(this.name+' '+this.age+' '+this.sex+' '+this.identity+' '+this.msg+''+this.phone);
   }
}

当在这种情况下的时候

当var mybase=new base( /* */); 将会调用Base constructor函数

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

Ext.Component = function(config){

  //...
}

Ext.BoxComponent = Ext.extend(Ext.Component, {

 //...
});

Example three :

function Base(config) {
this.name=config.name;
this.age=config.age;
this.sex=config.sex;
 }

var base=Ext.extend({
    constructor:function(config){
	   this.identity=config.identity;
	   this.msg=config.msg;
	   this.phone=config.phone;

	   base.superclass.constructor.call(this,config);
},
showMsg:function(){
window.alert(this.name+' '+this.age+' '+this.sex+' '+this.identity+' '+this.msg+''+this.phone);
   }
}

当在这种情况下的时候

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

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

Ext.data.DataWriter = function(config){
    Ext.apply(this, config);
};

Ext.data.JsonWriter = Ext.extend(Ext.data.DataWriter, {
    
    encode : true,
    
    encodeDelete: false,
    
    constructor : function(config){
        Ext.data.JsonWriter.superclass.constructor.call(this, config);    
    },

   //...此处省略
});

到此为止,已经对Ext.extend三种使用情况作了相应总结.如果不明白,建议先看下有关这个函数源码分析方面的文章,再使用Firebug多调试几次就会明白

affiliate_link
Share this Post:
Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

No Responses to “Extjs- Ext.extend函数的使用”

Leave a Reply:

Name (required):
Mail (will not be published) (required):
Website:
Comment (required):
XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>