ExtJS的一些特性

1、支持命名空间
定义:对于类的组织定义方式
代码举例:

Ext.namespace("Ext.dojochina");


和C#里面的命名空间差不多,在Java中类似于包的概念,

Java代码对照:

package Ext.dojochina;

 

看以下代码:

Ext.namespace("Ext.dojochina");
Ext.dojochina.HelloWorld = Ext.emptyFn;

 

上面代码定义了一个HelloWorld的空函数,等同于:

Ext.namespace("Ext.dojochina");
Ext.dojochina.HelloWorld = function(){};

 

可以用以下代码调用:

new Ext.dojochina.HelloWorld();


如果去年上面的命名空间声明行:Ext.namespace("Ext.dojochina"); 则会出错!

 

2、类实例属性

Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = Ext.emptyFn;
Ext.apply(Ext.dojochina.Person.prototype,{name:"name"});


上面的代码中,name就是Person的一个属性,Ext.apply是Ext提供的一个静态方法,主要作用是将后面一个参数赋到前面的参数对象上。

Java对照代码:

	private String name = "name";

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

可以用以下代码调用:

 

var _person = new Ext.dojochina.Person();

alert(_person.name); //这里还没有设值,因此弹出默认值name

_person.name = "selfly";

alert(_person.name); //这里已经设过值了,弹出selfly
 
 
3、类实例方法
Ext代码:
print:function(){
	alert(String.format("姓名:{0},性别{1},",this.name,this.sex));
}

Java对照代码:
	public void print(){
		System.out.println("姓名:%s,性别%s",this.name,this.sex);
	}

实例代码:

Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = Ext.emptyFn;
Ext.apply(Ext.dojochina.Person.prototype,{
		name:"",
		sex:"",
		print:function(){
			alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
		}
	});

var _person = new Ext.dojochina.Person();
_person.name = "张三";
_person.sex = "";
_person.print();

_person.name = "王五";
_person.sex = "";
_person.print();


4、类静态方法

Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = Ext.emptyFn;

Ext.dojochina.Person.print = function(_name,_sex){
	var _person = new Ext.dojochina.Person();
	_person.name = _name;
	_person.sex = _sex;
	_person.print();
}

Ext.apply(Ext.dojochina.Person.prototype,{
		name:"",
		sex:"",
		print:function(){
			alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
		}
	});
	
Ext.dojochina.Person.print("张三","");
Ext.dojochina.Person.print("王五","");


5、构造方法

Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = function(_cfg){
	Ext.apply(this,_cfg);
}

Ext.dojochina.Person.print = function(_name,_sex){
	var _person = new Ext.dojochina.Person({name:_name,sex:_sex});
	_person.print();
}

Ext.apply(Ext.dojochina.Person.prototype,{
		print:function(){
			alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
		}
	});
	
Ext.dojochina.Person.print("张三","");
Ext.dojochina.Person.print("王五","");


6、支持类继承

 

Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = function(_cfg){
	Ext.apply(this,_cfg);
}

Ext.apply(Ext.dojochina.Person.prototype,{
		job:"",
		print:function(){
			alert(String.format("姓名:{0},性别:{1},角色:{2}",this.name,this.sex,this.job));
		}
	});
	
	
Ext.dojochina.Teacher = function(_cfg){
	Ext.apply(this,_cfg);
}
Ext.extend(Ext.dojochina.Teacher,Ext.dojochina.Person,{job:"老师"}); //Teacher继承Person并给job重新赋值


Ext.dojochina.Student = function(_cfg){
	Ext.apply(this,_cfg);
}
Ext.extend(Ext.dojochina.Student,Ext.dojochina.Person,{job:"学生"}); //Student继承Person并给job重新赋值
	
	
var _teacher = new Ext.dojochina.Teacher({name:"张三",sex:""});
_teacher.print();

var _student = new Ext.dojochina.Student({name:"王五",sex:""});
_student.print();


7、类实例方法重写

Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = function(_cfg){
	Ext.apply(this,_cfg);
}

Ext.apply(Ext.dojochina.Person.prototype,{
		print:function(){
			alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
		}
	});
	
	
Ext.dojochina.Teacher = function(_cfg){
	Ext.apply(this,_cfg);
}
Ext.extend(Ext.dojochina.Teacher,Ext.dojochina.Person,{
	print:function(){
		alert(String.format("{0}是一位{1}老师",this.name,this.sex));
	}
}); //Teacher继承Person并重写print方法

var _teacher = new Ext.dojochina.Teacher({name:"张三",sex:""});
_teacher.print();


8、支持命名空间别名、类别名

Ext.namespace("Ext.dojochina");

Dc = Ext.dojochina;

Ext.dojochina.Person = function(_cfg){
	Ext.apply(this,_cfg);
}

PN = Ext.dojochina.Person;


这里把命名空间Ext.dojochina取了一个别名Dc,对于命名空间别名的命名,最好以大写字母开头,

当然小写字母也没错,但这是一个良好的编码规范。

9、支持事件队列
Ext的事件队列模式,由Ext.util.Observable类支持。
 
Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = function(){
	this.addEvents(
		"namechange",
		"sexchange"
	);
}

Ext.extend(Ext.dojochina.Person,Ext.util.Observable,{
		name:"",
		sex:"",
		setName:function(_name){
			if(this.name != _name){
				this.fireEvent("namechange",this,this.name,_name);
				this.name = _name;
			}
		},
		setSex:function(_sex){
			if(this.sex != _sex){
				this.fireEvent("sexchange",this,this.sex,_sex);
				this.sex = _sex;
			}
		}
	});

	
var _person = new Ext.dojochina.Person();

_person.on("namechange",function(_person,_old,_new){
	alert("old name:"+_old+" new name:"+_new);
});

_person.on("sexchange",function(_person,_old,_new){
	alert("old sex:"+_old+" new sex:"+_new);
});

_person.on("namechange",function(_person,_old,_new){
	alert("old name2:"+_old+" new name2:"+_new);
});

_person.setName("张三");
_person.setSex("");

 
 
 
 
 
 
 
 
 

你可能感兴趣的:(ExtJS的一些特性)