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. });
7. //通过Ext.widget()创建实例
8. Ext.widget('simplepanel_007',{
9. width : 100,
10. height : 100
11. }).render(Ext.getBody());
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());

[js]  view plain copy

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. });
9. var boy1 = Ext.create('Boy');
10. boy1.say('I am boy1...');
12. //可以通过alternateClassName实例化该类
13. var boy2 = Ext.create('boy2');
14. boy2.say('I am boy2...');
16. var boy3 = Ext.create('boy3');
17. boy3.say('I am boy3...');

[js]  view plain copy

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. });
11. var czp = Ext.create('Boy',{name:'czpae86'});
12. //通过getName()方法获得属性name值
13. alert(czp.getName());
14. //通过setAge()方法改变属性age值
15. czp.setAge(25.5);

[js]  view plain copy

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. });
8. var czp = Ext.create('Boy');
9. //继承了Person,所以可以使用say()方法
10. czp.say('my name is czp.');

[js]  view plain copy

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. });
10. Ext.define('Boy', {
11. extend : 'Person'
12. });
14. //子类可以通过"类名.方法名"调用父类通过"inheritableStatics"定义的方法
15. Boy.sleep();

[js]  view plain copy

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 : 可以实现多继承

Js代码   

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

[js]  view plain copy

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

[js]  view plain copy

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. });
11. //对于uses属性,Boy类放在后面是可以的,不会报错
12. Ext.define('Boy', {
13. play : function(){
14. alert('play');
15. }
16. });
19. //对于requires属性,Boy类必须在Grid类之前加载,不然会报错
20. Ext.define('Boy', {
21. play : function(){
22. alert('play');
23. }
24. });
26. Ext.define('Gird', {
27. requires : ['Boy'],
28. getBoy : function(){
29. return Ext.create('Boy');
30. },
31. sleep : function(){
32. alert('sleep');
33. }
34. });

[js]  view plain copy

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. });