extjs学习03——extjs的面向对象程序设计

extjs学习03——extjs的面向对象程序设计
学习自dojo china陈治文老师的extjs视频教程
本篇日志是对视频章节的小结

一、Extjs为面向对象做出的努力：
【extjs是基于javascript的，而javascript其实又是基于面向对象的面向过程语言，所以其实javascript在面向对象上是极其有限的】
1.支持命名空间
命名空间
定义：对于类的组织定义方式
代码举例：Ext.namespace(“Ext.dojochina”);
Ext.dojochina.HelloWorld = function(){};
Java代码对照：package Ext.dojochina;

2.支持类实例属性
类实例属性
定义：对于一个实例的特征描述
代码举例：
Ext.apply(Ext.dojochina.Person.prototype,{
name:”xxx”【name就是属性】
})
【Ext.apply是extjs的一个静态方法，作用是将name赋给person的prototype，也就是person添加了name这个属性】
Java代码对照：private name = “xxx”;		setName/getName

3.支持类实例方法
类实例方法
定义：一个对象所能具有的功能与动作
代码举例：
print:function(){
alert(String.format(“姓名：{0},性别：{1}”,this.name,this.sex));【对字段值的指定】
}
Java代码对照：
public void print(){
	System.out.printf("姓名：%s，性别：%s",this.name,this.sex);
}

4.支持类静态方法
类静态方法
定义：在一个类级别上共享的方法
代码举例：
Ext.dojochina.Person.print=function(_name,_sex){
	var _person = new Ext.dojochina.Person();
	_person.name = _name;
	_person.sex = _sex;
	_person.print();
}
Java代码对照：
Person.print(String name,String sex){
	Person person = new Person();
	person.setName(name);
	person.setSex(sex);
	person.print();
}

5.支持构造方法
构造方法
定义：在初始化一个对象的同时执行的方法
代码举例：
Ext.dojochina.Person = function(_cfg){
	Ext.apply(this,_cfg);
}
Java代码对照：
public Person(String name,String sex){
	this.name = name;
	this.sex = sex;
}

6.支持类继承
类继承
定义：对于类的一种扩展形式
代码举例：
Ext.extend(Ext.dojochina.Student,
	Ext.dojochina.Person,{job:"学生"}
);【Student继承Person】
Java代码对照：
class Student extend Person{
	public Student(String name,String sex){
		super(name,sex);
		this.setJob("学生");
	}	
}

7.支持类实例方法重写
类实例方法重写
定义：子类在继承父类时对其已经存在的方法进行重新定义
代码举例：
Ext.extend(Ext.dojochina.Teacher,
	Ext.dojochina.Person,{
		print:function(){
			alert(String.format("{0}是一位{1}老师",this.name,this.sex));
		}
	}
);【重写方法在子类中，父类方法不受影响】

8.支持命名空间别名
命名空间别名
定义：对于命名空间的别称
代码举例：
Dc = Ext.dojochina;【短写规则：首字母必须大写，其余字母小写】

9.支持类别名
类别名
定义：对于类的别称
代码举例：
PN = Ext.dojochina.Person;【类别名字母需全部大写，以区别命名空间别名】

10.支持事件队列
事件
定义：对于外界影响的反应，在extjs还支持事件队列模式。由Ext.util.Observable类支持
代码举例：
Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = function(){
	this.addEvents(
		"namechange",【事件声明】
		"sexchange"
	);
};
Ext.extend(Ext.dojochina.Person,
	Ext.dojochina.Observable,{
		name:"",
		sex:"".
		setName:function(_name){
			if(this.name != _name){
				this.fireEvent("namechange",this,this.name,_name);【事件发布】
			}
		},
		setSex:function(_sex){
			if(this.sex != _sex){
				this.fireEvent("sexchange",this,this.sex,_sex);
			}
		},
	}
);

事件列表
Ext.onReady(function(){
	var txt_name = Ext.get("txt_name");
	var txt_sex = Ext.get("txt_sex");
	_person = new Ext.dojochina.Person();
	_person.on("namechange",function(_person,_old,_new){
		txt_name.dom.value = _new;
	});
	_person.on("sexchange",function(_person,_old,_new){
		txt_sex.dom.value = _new;
	});
	_person.on("namechange",function(_person,_old,_new){
		document.title = _new;
	});【此处产生了事件列表。在实际应用中，不太可能把一个事件产生的方方面面的结果全部写在一个函数里，而需要在不同的场景里面多次定阅】
});
Button_click = function(){
_person.setName(prompt(“请输入姓名：”,””));【此处产生两个效果：1姓名的text中值变为输入值，2浏览器网页标题栏变为输入值】
_person.setSex(prompt(“请输入性别：”,””));
}


二、extjs的另几种面向对象设计体现
1.GWT-EXT为java程序员编写EXTJS的应用提供了可能【可以只写java，不写javascript】
2.EXTTLD为JSP程序员的标签化部署EXTJS提供了可能
3.EXTSharp为C#程序员编写EXTJS的应用提供了可能