ExtJS教程（3）--- Ext中类的使用

本章仅仅介绍Ext中类的基础知识，一些高级知识会在以后的章节中穿插介绍

注：由于截图上传较为麻烦，且图片占用篇幅较大，所以在以后的文章中如果不是特别必要，将不会插入很多图片，最终的执行结果请大家自行验证。

1、定义一个类

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

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

注意上图中的superclass，我们用Ext定义的类如果没有指明继承自哪个类，默认都是继承自Ext.Base，这个类就相当于Java中的Object类，是Ext所有类的基类。如何继承其他类会在下面讲到。

2、Ext中构造函数

Ext.define('Person',{
	name:'jaune',
	age:18,
	constructor:function(config){
		Ext.apply(this,config);
	}
});
//创建一个类
var person = new Person({
	name:'petty'
});
console.log(person);

这里的apply与第二章中的apply类似，Ext同样有applyIf函数，用法与第二章中的applyIf类似，第二章中的apply和applyIf函数就是仿照的Ext中的这两个函数写的.。如果大家有兴趣查看源码的话可以再Ext的帮助中找到Ext.apply方法然后点击后面的“view source”查看其源码。

3、类的继承

//使用Ext定义一个类
Ext.define('Person',{
	name:'jaune',
	age:18,
	constructor:function(config){
		Ext.apply(this,config);
	}
});

//类的继承
Ext.define('Man',{
	extend:'Person',
	sex:'Male',
	constructor:function(config){
		//这里是为了确保创建的对象中的sex属性是Male，如果config中有sex属性就删除这个属性
		if(config.hasOwnProperty('sex')){
			delete config.sex;
		}
		
		/*
		 * callParent的意思就是调用父类同名的方法，这里用作继承父类构造方法
		 * 比如父类中有一个toString方法，在子类的toString方法中调用this.callParent()方法，则会执行父类中的toString方法
		 * 这个大家可以亲自验证
		 */
		this.callParent([config]);
	},
	//这个方法是为了方便打印
	toString:function(){
		return {
			name:this.name,
			age:this.age,
			sex:this.sex
		};
	}
});

var man = new Man({
	name:'tom',
	sex:'Female'
});
console.log(man.toString());
/*
 * 打印结果如下
 * Object {name: "tom", age: 18, sex: "Male"} 
 */

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

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

/**
 * statics 可以包含类的静态和静态方法，但是不能被子类继承
 * inheritableStatics 与statics类似但是可以被子类继承
 */

Ext.define('DateUtil',{
	inheritableStatics:{
		currentDate:Ext.Date.format(new Date(),'Y-m-d'),
		getCurrentDate:function(formatStr){
			if(Ext.isString(formatStr)){
				Ext.Date.format(new Date(),formatStr);
			}else{
				return this.currentDate;
			}
		}
	}
});
console.log(DateUtil.currentDate);
Ext.define('TimeUtil',{
	extend:'DateUtil',
	statics:{
		currentTime:Ext.Date.format(new Date(),'Y-m-d H:i:s')
	}
});
console.log(TimeUtil.currentDate);

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

5、单例

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

Ext.define('DateUtil',{
	singleton:true,
	currentDate:Ext.Date.format(new Date(),'Y-m-d'),
	getCurrentDate:function(formatStr){
		if(Ext.isString(formatStr)){
			Ext.Date.format(new Date(),formatStr);
		}else{
			return this.currentDate;
		}
	}
});

console.log(DateUtil);

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