您的位置：首页 > Web前端 > JavaScript

[第二讲]ExtJs在面向对象所处的努力

2011-06-17 15:07 239 查看
1.支持命名空间



helloworld.js

Ext.namespace("Ext.dojochina") ;//命名空间
Ext.dojochina.HelloWorld = Ext.emptyFn ;//得到一个空的函数




helloworld.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>命名空间</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="HelloWorld.js" mce_src="HelloWorld.js"></mce:script>
<mce:script type="text/javascript"><!--
	new Ext.dojochina.HelloWorld() ;
// --></mce:script>
</head>
<body>
</body>
</html>




2.支持类实例属性

person.js



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




person.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>类实例属性</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="Person.js" mce_src="Person.js"></mce:script>
<mce:script type="text/javascript"><!--
	var _person = new Ext.dojochina.Person() ;
	
	alert(_person.name) ;
	
	_person.name = "张妍娜" ;
	
	alert(_person.name) ;
	
// --></mce:script>
</head>
<body>
</body>
</html>




3.支持类实例方法

person.js

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




person.html



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>类实例方法</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="Person.js" mce_src="Person.js"></mce:script>
<mce:script type="text/javascript"><!--
	var _person = new Ext.dojochina.Person() ;
	
	_person.name = "陈治文" ;
	
	_person.sex = "男" ;
	
	_person.print() ;
	
	_person.name = "张妍娜" ;
	
	_person.sex = "女" ;
	
	_person.print() ;
	
// --></mce:script>
</head>
<body>
</body>
</html>




4.支持类静态方法



person.js

Ext.namespace("Ext.dojochina") ;
Ext.dojochina.Person = function(_cfg){
	
	Ext.apply(this , _cfg) ;
} ;
PN = Ext.dojochina.Person ;
Ext.dojochina.Person.print = function(_name , _sex){
	
	var _person = new PN({name:_name , sex:_sex}) ;
	
	_person.print() ;
}
Ext.apply(Ext.dojochina.Person.prototype , {
				print:function(){
					
					alert(String.format("姓名:{0},性别:{1}" , this.name , this.sex)) ;
				}
		  }) ;




persion.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>类别名</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="Person.js" mce_src="Person.js"></mce:script>
<mce:script type="text/javascript"><!--
	Ext.dojochina.Person.print("陈治文" , "男") ;
	
	Ext.dojochina.Person.print("张妍娜" , "女") ;
	
// --></mce:script>
</head>
<body>
</body>
</html>




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




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>类构造方法</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="Person.js" mce_src="Person.js"></mce:script>
<mce:script type="text/javascript"><!--
	Ext.dojochina.Person.print("陈治文" , "男") ;
	
	Ext.dojochina.Person.print("张妍娜" , "女") ;
	
// --></mce:script>
</head>
<body>
</body>
</html>




6.支持类继承



student.js

Ext.namespace("Ext.dojochina") ;
Ext.dojochina.Student = function(_cfg){
	
	Ext.apply(this , _cfg) ;
} ;
Ext.extend(Ext.dojochina.Student , Ext.dojochina.Person , {
		   		job:"学生"
		   }) ;




teacher.js



Ext.namespace("Ext.dojochina") ;
Ext.dojochina.Teacher = function(_cfg){
	
	Ext.apply(this , _cfg) ;
} ;
Ext.extend(Ext.dojochina.Teacher , Ext.dojochina.Person , {
		   		job:"教师"
		   }) ;




person.js

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




person.html



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>类继承</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="Person.js" mce_src="Person.js"></mce:script>
<mce:script type="text/javascript" src="Teacher.js" mce_src="Teacher.js"></mce:script>
<mce:script type="text/javascript" src="Student.js" mce_src="Student.js"></mce:script>
<mce:script type="text/javascript"><!--
	
	var _teacher = new Ext.dojochina.Teacher({name:"陈治文" , sex:"男"}) ;
	
	_teacher.print() ;
	
	var _stduent = new Ext.dojochina.Student({name:"张妍娜" , sex:"女"}) ;
	
	_stduent.print() ;
	
// --></mce:script>
</head>
<body>
</body>
</html>




7.支持类实例方法重写



peison.js

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




student.js



Ext.namespace("Ext.dojochina") ;
Ext.dojochina.Student = function(_cfg){
	
	Ext.apply(this , _cfg) ;
} ;
Ext.extend(Ext.dojochina.Student , Ext.dojochina.Person , {
		   		print:function(){
					
					alert(String.format("{0}是一位{1}学生" , this.name , this.sex)) ;
				}
		   }) ;




teacher.js



Ext.namespace("Ext.dojochina") ;
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)) ;
				}
		   }) ;




person.html



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>方法重写</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="Person.js" mce_src="Person.js"></mce:script>
<mce:script type="text/javascript" src="Teacher.js" mce_src="Teacher.js"></mce:script>
<mce:script type="text/javascript" src="Student.js" mce_src="Student.js"></mce:script>
<mce:script type="text/javascript"><!--
	var _person = new Ext.dojochina.Person({name:"钟无意" , sex:"男"}) ;
	
	_person.print() ;
	
	var _teacher = new Ext.dojochina.Teacher({name:"陈治文" , sex:"男"}) ;
	
	_teacher.print() ;
	
	var _stduent = new Ext.dojochina.Student({name:"张妍娜" , sex:"女"}) ;
	
	_stduent.print() ;
	
// --></mce:script>
</head>
<body>
</body>
</html>




8.支持命名空间别名



person.js

Ext.namespace("Ext.dojochina") ;
Dc = Ext.dojochina ;
Ext.dojochina.Person = function(_cfg){
	
	Ext.apply(this , _cfg) ;
} ;
Ext.dojochina.Person.print = function(_name , _sex){
	
	var _person = new Dc.Person({name:_name , sex:_sex}) ;
	
	_person.print() ;
}
Ext.apply(Ext.dojochina.Person.prototype , {
				print:function(){
					
					alert(String.format("姓名:{0},性别:{1}" , this.name , this.sex)) ;
				}
		  }) ;




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>类别名</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="Person.js" mce_src="Person.js"></mce:script>
<mce:script type="text/javascript"><!--
	Ext.dojochina.Person.print("陈治文" , "男") ;
	
	Ext.dojochina.Person.print("张妍娜" , "女") ;
	
// --></mce:script>
</head>
<body>
</body>
</html>




person.js



Ext.namespace("Ext.dojochina") ;
Ext.dojochina.Person = function(_cfg){
	
	Ext.apply(this , _cfg) ;
} ;
PN = Ext.dojochina.Person ;
Ext.dojochina.Person.print = function(_name , _sex){
	
	var _person = new PN({name:_name , sex:_sex}) ;
	
	_person.print() ;
}
Ext.apply(Ext.dojochina.Person.prototype , {
				print:function(){
					
					alert(String.format("姓名:{0},性别:{1}" , this.name , this.sex)) ;
				}
		  }) ;




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>类别名</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="Person.js" mce_src="Person.js"></mce:script>
<mce:script type="text/javascript"><!--
	Ext.dojochina.Person.print("陈治文" , "男") ;
	
	Ext.dojochina.Person.print("张妍娜" , "女") ;
	
// --></mce:script>
</head>
<body>
</body>
</html>




9.支持事件队列



person.js

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




person.html



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<title>事件</title>
<mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="Person.js" mce_src="Person.js"></mce:script>
<mce:script type="text/javascript"><!--
	var _person = null ;
	
	button_click = function(){
	
		_person.setName(prompt("请输入姓名:" , "")) ;
		
		_person.setSex(prompt("请输入性别:" , "")) ;
	
	}
	
	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 ;
								  }) ;
		
	}) ;
	
// --></mce:script>
</head>
<body>
姓名:<input type="text" id="txt_name" maxlength="10"/><br/>
性别:<input type="text" id="txt_sex" maxlength="10"/><br/>
<input type="button" value="输入" onclick="button_click()"/>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航