Ext中类的使用

1、定义一个类

[javascript] view plain copy

1. //使用Ext定义一个类  
2. Ext.define('Person',{  
3.     name:'jaune',  
4.     age:18  
5. });  
6. //创建一个类  
7. var person = new Person();  
8. console.log(person);  

                   

          从打出来的结果中可以看出我们定义的属性已经出现在了类中，这是Ext中最简单的类的定义方式。

          注意上图中的superclass，我们用Ext定义的类如果没有指明继承自哪个类，默认都是继承自Ext.Base，

         这个类就相当于Java中的Object类，是Ext所有类的基类。如何继承其他类会在下面讲到。

2、Ext中构造函数

[javascript] view plain copy

1. Ext.define('Person',{  
2.     name:'jaune',  
3.     age:18,  
4.     constructor:function(config){  
5.         Ext.apply(this,config);  
6.     }  
7. });  
8. //创建一个类  
9. var person = new Person({  
10.     name:'petty'  
11. });  
12. console.log(person);  

3、类的继承     

[javascript] view plain copy

1. //使用Ext定义一个类  
2. Ext.define('Person',{  
3.     name:'jaune',  
4.     age:18,  
5.     constructor:function(config){  
6.         Ext.apply(this,config);  
7.     }  
8. });  
9.   
10. //类的继承  
11. Ext.define('Man',{  
12.     extend:'Person',  
13.     sex:'Male',  
14.     constructor:function(config){  
15.         //这里是为了确保创建的对象中的sex属性是Male，如果config中有sex属性就删除这个属性  
16.         if(config.hasOwnProperty('sex')){  
17.             delete config.sex;  
18.         }  
19.           
20.         /* 
21.          * callParent的意思就是调用父类同名的方法，这里用作继承父类构造方法 
22.          * 比如父类中有一个toString方法，在子类的toString方法中调用this.callParent()方法，则会执行父类中的toString方法 
23.          * 这个大家可以亲自验证 
24.          */  
25.         this.callParent([config]);  
26.     },  
27.     //这个方法是为了方便打印  
28.     toString:function(){  
29.         return {  
30.             name:this.name,  
31.             age:this.age,  
32.             sex:this.sex  
33.         };  
34.     }  
35. });  
36.   
37. var man = new Man({  
38.     name:'tom',  
39.     sex:'Female'  
40. });  
41. console.log(man.toString());  
42. /* 
43.  * 打印结果如下 
44.  * Object {name: "tom", age: 18, sex: "Male"}  
45.  */  

                        man对象创建的过程是，new对象时将config传入Man类的构造函数中，然后Man的构造函数将sex属性过滤掉，

                         然后调用父类的构造方法将config中的属性赋予man对象

   4、类的静态属性和静态方法

            

[javascript] view plain copy

1. /** 
2.  * statics 可以包含类的静态和静态方法，但是不能被子类继承 
3.  * inheritableStatics 与statics类似但是可以被子类继承 
4.  */  
5.   
6. Ext.define('DateUtil',{  
7.     inheritableStatics:{  
8.         currentDate:Ext.Date.format(new Date(),'Y-m-d'),  
9.         getCurrentDate:function(formatStr){  
10.             if(Ext.isString(formatStr)){  
11.                 Ext.Date.format(new Date(),formatStr);  
12.             }else{  
13.                 return this.currentDate;  
14.             }  
15.         }  
16.     }  
17. });  
18. console.log(DateUtil.currentDate);  
19. Ext.define('TimeUtil',{  
20.     extend:'DateUtil',  
21.     statics:{  
22.         currentTime:Ext.Date.format(new Date(),'Y-m-d H:i:s')  
23.     }  
24. });  
25. console.log(TimeUtil.currentDate);  

              上面的两个类，如果DateUtil中用的是statics属性来定义静态属性和方法则TimeUtil无法继承

  

5、单例

          在Ext中定义单例模式的类非常简单，在定义类的时候加上singleton:true 就表示要定义的类为单例，剩下的事情Ext会替你            解决，只需要像定义普通类一样编码就可以了。

         

[javascript] view plain copy

1. Ext.define('DateUtil',{  
2.     singleton:true,  
3.     currentDate:Ext.Date.format(new Date(),'Y-m-d'),  
4.     getCurrentDate:function(formatStr){  
5.         if(Ext.isString(formatStr)){  
6.             Ext.Date.format(new Date(),formatStr);  
7.         }else{  
8.             return this.currentDate;  
9.         }  
10.     }  
11. });  
12.   
13. console.log(DateUtil);  

          

        JS中的单例其实就是将类实例化，可能没有大家想的那么复杂