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.'); 
<
12265
/div>

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 : 可以实现多继承(相当于调用Ext.apply(this,other)将other类中的方法合并到当前的类中，也相当于另一种形式的继承。)

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

    } 

});