Extjs4.0 之Ext.Class 属性详解 (alias/mixins /uses/requires/singleton等属性)

Ext.Class 属性详解 :

1 ,  alias : 相当于别名一样,可以起多个,可以通过xtype和Ext.widget()创建实例:

 

Js代码  


Ext.define('SimplePanel', {  

    extend: 'Ext.panel.Panel',  

    alias: ['widget.simplepanel_007','widget.simplepanel_008'],  

        title: 'Yeah!'  

});  

  

//通过Ext.widget()创建实例  

Ext.widget('simplepanel_007',{  

    width : 100,  

    height : 100  

}).render(Ext.getBody());  

  

//通过xtype创建  

Ext.widget('simplepanel_007', {  

    width : 100,  

    items: [  

        {xtype: 'simplepanel_008', html: 'Foo'},  

        {xtype: 'simplepanel_008', html: 'Bar'}  

    ]  

}).render(Ext.getBody());  

 

2 , alternateClassName : 跟alias有点类似,相当于给类找替身,可以多个,可以通过Ext.create()创建实例:

 

Js代码  


Ext.define('Boy', {  

       //定义多个替身  

       alternateClassName: ['boy2', 'boy3'],  

       say : function(msg){  

        alert(msg);  

    }  

});  

              

var boy1 = Ext.create('Boy');  

boy1.say('I am boy1...');  

  

//可以通过alternateClassName实例化该类  

var boy2 = Ext.create('boy2');  

boy2.say('I am boy2...');  

  

var boy3 = Ext.create('boy3');  

boy3.say('I am boy3...');  

 

3 , config:类的属性配置,属性可以自动生成geter/seter方法

 

Js代码  


Ext.define('Boy', {  

    config : {  

        name : 'czp',  

        age : 25  

    },  

    constructor: function(cfg) {  

            this.initConfig(cfg);  

    }  

});  

              

var czp = Ext.create('Boy',{name:'czpae86'});  

//通过getName()方法获得属性name值  

alert(czp.getName());  

//通过setAge()方法改变属性age值  

czp.setAge(25.5);  

 

4 , extend : 继承,可以继承单个类

 

Js代码  


Ext.define('Person', {  

    say: function(text) { alert(text); }  

});  

Ext.define('Boy', {  

    extend : 'Person'  

});  

              

var czp = Ext.create('Boy');  

//继承了Person,所以可以使用say()方法  

czp.say('my name is czp.');  

 

5 , inheritableStatics : 定义静态方法,可以通过"类名.方法名"调用静态方法. 类似 statics属性,

区别是:子类也可以使用该静态方法,但statics属性定义的静态方法子类是不会继承的.

Js代码  


Ext.define('Person', {  

    inheritableStatics : {  

        sleep : function(){  

            alert('sleep');  

        }  

    },  

    say: function(text) { alert(text); }  

});  

  

Ext.define('Boy', {  

    extend : 'Person'  

});  

  

//子类可以通过"类名.方法名"调用父类通过"inheritableStatics"定义的方法  

Boy.sleep();  

 

6 , mixins : 可以实现多继承

 

Js代码  


Ext.define('Person', {  

    say: function(text) { alert(text); }  

});  

  

Ext.define('Boy', {  

    play : function(){  

        alert('play');  

    }  

});  

  

Ext.define('Gird', {  

    sleep : function(){  

        alert('sleep');  

    }  

});  

              

Ext.define('A_007', {  

    //继承Person  

    extend : 'Person',  

    //同时继承'Boy','Gird'  

    mixins : ['Boy','Gird']  

});  

              

var a_007 = new A_007();  

a_007.say('我可以say,也可以play,还可以sleep!!');  

a_007.play();  

a_007.sleep();  

 

7 , singleton : 创建单例模式的类, 如果singleton为true,那么该类不能用通过new创建,也不能被继承

 

Js代码  


Ext.define('Logger', {  

    //singleton为true  

    singleton: true,  

    log: function(msg) {  

        alert(msg);  

    }  

});  

//方法调用"类名.方法名"  

Logger.log('Hello');  

 

 8 , statics : 与第5个inheritableStatics属性类似,statics属性定义的静态方法子类是不会继承的.请看第5个属性.

 

 9 , uses 和 requires : 与requires属性类似,都是对某些类进行引用

uses -- 被引用的类可以在该类之后才加载.

requires -- 被引用的类必须在该类之前加载.

 

Js代码  


Ext.define('Gird', {  

    uses : ['Boy'],  

    getBoy : function(){  

        return Ext.create('Boy');  

    },  

    sleep : function(){  

        alert('sleep');  

    }  

});  

  

//对于uses属性,Boy类放在后面是可以的,不会报错  

Ext.define('Boy', {  

        play : function(){  

               alert('play');  

        }  

});  

  

  

//对于requires属性,Boy类必须在Grid类之前加载,不然会报错  

Ext.define('Boy', {  

    play : function(){  

        alert('play');  

    }  

});  

              

Ext.define('Gird', {  

    requires : ['Boy'],  

    getBoy : function(){  

        return Ext.create('Boy');  

    },  

    sleep : function(){  

        alert('sleep');  

    }  

});