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

 

Ext.Class 属性详解 :

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

Js代码 

1. Ext.define('SimplePanel', { 
2.     extend: 'Ext.panel.Panel', 
3.     alias: ['widget.simplepanel_007','widget.simplepanel_008'], 
4.         title: 'Yeah!' 
5. }); 
6.  
7. //通过Ext.widget()创建实例 
8. Ext.widget('simplepanel_007',{ 
9.     width : 100, 
10.     height : 100 
11. }).render(Ext.getBody()); 
12.  
13. //通过xtype创建 
14. Ext.widget('simplepanel_007', { 
15.     width : 100, 
16.     items: [ 
17.         {xtype: 'simplepanel_008', html: 'Foo'}, 
18.         {xtype: 'simplepanel_008', html: 'Bar'} 
19.     ] 
20. }).render(Ext.getBody()); 

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

Js代码 

1. Ext.define('Boy', { 
2.        //定义多个替身 
3.        alternateClassName: ['boy2','boy3'], 
4.        say : function(msg){ 
5.         alert(msg); 
6.     } 
7. }); 
8.              
9. var boy1 = Ext.create('Boy'); 
10. boy1.say('I am boy1...'); 
11.  
12. //可以通过alternateClassName实例化该类 
13. var boy2 = Ext.create('boy2'); 
14. boy2.say('I am boy2...'); 
15.  
16. var boy3 = Ext.create('boy3'); 
17. boy3.say('I am boy3...'); 

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

Js代码 

1. Ext.define('Boy', { 
2.     config : { 
3.         name : 'czp', 
4.         age : 25 
5.     }, 
6.     constructor: function(cfg) { 
7.             this.initConfig(cfg); 
8.     } 
9. }); 
10.              
11. var czp = Ext.create('Boy',{name:'czpae86'}); 
12. //通过getName()方法获得属性name值 
13. alert(czp.getName()); 
14. //通过setAge()方法改变属性age值 
15. czp.setAge(25.5); 

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

Js代码 

1. Ext.define('Person', { 
2.     say: function(text) { alert(text); } 
3. }); 
4. Ext.define('Boy', { 
5.     extend : 'Person' 
6. }); 
7.              
8. var czp = Ext.create('Boy'); 
9. //继承了Person,所以可以使用say()方法 
10. czp.say('my name is czp.'); 

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

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

Js代码 

1. Ext.define('Person', { 
2.     inheritableStatics : { 
3.         sleep : function(){ 
4.             alert('sleep'); 
5.         } 
6.     }, 
7.     say: function(text) { alert(text); } 
8. }); 
9.  
10. Ext.define('Boy', { 
11.     extend : 'Person' 
12. }); 
13.  
14. //子类可以通过"类名.方法名"调用父类通过"inheritableStatics"定义的方法 
15. Boy.sleep(); 

6 , mixins : 可以实现多继承(相当于调用Ext.apply(this,other)将other类中的方法合并到当前的类中，也相当于另一种形式的继承。)

Js代码 

1. Ext.define('Person', { 
2.     say: function(text) { alert(text); } 
3. }); 
4.  
5. Ext.define('Boy', { 
6.     play : function(){ 
7.         alert('play'); 
8.     } 
9. }); 
10.  
11. Ext.define('Gird', { 
12.     sleep : function(){ 
13.         alert('sleep'); 
14.     } 
15. }); 
16.              
17. Ext.define('A_007', { 
18.     //继承Person 
19.     extend : 'Person', 
20.     //同时继承'Boy','Gird' 
21.     mixins : ['Boy','Gird'] 
22. }); 
23.              
24. var a_007 =new A_007(); 
25. a_007.say('我可以say,也可以play,还可以sleep!!'); 
26. a_007.play(); 
27. a_007.sleep(); 

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

Js代码 

1. Ext.define('Logger', { 
2.     //singleton为true 
3.     singleton: true, 
4.     log: function(msg) { 
5.         alert(msg); 
6.     } 
7. }); 
8. //方法调用"类名.方法名" 
9. Logger.log('Hello'); 

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

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

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

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

Js代码 

1. Ext.define('Gird', { 
2.     uses : ['Boy'], 
3.     getBoy : function(){ 
4.         return Ext.create('Boy'); 
5.     }, 
6.     sleep : function(){ 
7.         alert('sleep'); 
8.     } 
9. }); 
10.  
11. //对于uses属性,Boy类放在后面是可以的,不会报错 
12. Ext.define('Boy', { 
13.         play : function(){ 
14.                alert('play'); 
15.         } 
16. }); 
17.  
18.  
19. //对于requires属性,Boy类必须在Grid类之前加载,不然会报错 
20. Ext.define('Boy', { 
21.     play : function(){ 
22.         alert('play'); 
23.     } 
24. }); 
25.              
26. Ext.define('Gird', { 
27.     requires : ['Boy'], 
28.     getBoy : function(){ 
29.         return Ext.create('Boy'); 
30.     }, 
31.     sleep : function(){ 
32.         alert('sleep'); 
33.     } 
34. });