Extjs复习笔记（二）

最新推荐文章于 2010-11-07 01:54:06 发布

最新推荐文章于 2010-11-07 01:54:06 发布 · 131 阅读

文章标签：

#EXT #JavaScript #Dreamweaver #CSS #prototype #ViewUI

Extjs等js的Ajax框架专栏收录该内容

27 篇文章

订阅专栏

用Dreamweaver新建一个网站，把ext-3.3包中的adapter和resources文件夹拷到目录下，再把

ext-all.js拷过来。然后我们在sample里面新建js文件和html文件。在html文件中要引入：

adapter/ext/ext-base.js和ext-all.js，以及自己写的js文件。注意顺序。

1、注册一个命名空间：

Ext.namespace("Ext.ling");

下面在命名空间内初始化一个类，并定义方法。

2、动态方法print()

Ext.namespace("Ext.ling") ;

Ext.ling.Person = Ext.emptyFn ; // 在命名空间上定义一个类
Ext.apply(Ext.ling.Person.prototype , { //为自定义的类 增加一个 name 属性，并初始化
		  		name:"",
				sex:"",
				print:function(){
					
					alert(String.format("姓名:{0},性别:{1}" , this.name , this.sex)) ;
				}
		  }) ;

调用时，可以如下方式赋值：

	var _person = new Ext.ling.Person() ;
	
	_person.name = "凌云壮志" ;
	
	_person.sex = "男" ;
	
	_person.print() ;
	
	_person.name = "XXX" ;
	
	_person.sex = "女" ;
	
	_person.print() ;

3、类静态方法。

定义在一个类级别上共享的方法。下面的示例中，print()方法就是一个静态方法。

Ext.namespace("Ext.ling") ;

Ext.ling.Person = Ext.emptyFn ;

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

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

然后调用方法如下：

	Ext.ling.Person.print("凌云壮志" , "男") ;
	
	Ext.ling.Person.print("XXX" , "女") ;

4、类的构造方法

把上面的 Ext.ling.Person = Ext.emptyFn ; 改成下面的代码就行了。

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

5、类的继承：

定义一个父类：Person.js

Ext.namespace("Ext.ling") ;

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

Ext.apply(Ext.ling.Person.prototype , {
		  		job:"无",
				print:function(){
					
					alert(String.format("姓名:{0},性别:{1},角色:{2}" , this.name , this.sex , this.job)) ;
				}
		  }) ;

定义一个教师类：Teacher.js

Ext.namespace("Ext.ling") ;

Ext.ling.Teacher = function(_cfg){
	
	Ext.apply(this , _cfg) ;
} ;

Ext.extend(Ext.ling.Teacher , Ext.ling.Person , {
		   		job:"教师"
		   }) ;

定义一个学生类：Student.js

Ext.namespace("Ext.ling") ;

Ext.ling.Student = function(_cfg){
	
	Ext.apply(this , _cfg) ;
} ;

Ext.extend(Ext.ling.Student , Ext.ling.Person , {
		   		job:"学生"
		   }) ;

然后再调用两个继承的类：

	var _teacher = new Ext.ling.Teacher({name:"张三" , sex:"男"}) ;
	
	_teacher.print() ;
	
	var _stduent = new Ext.ling.Student({name:"李四" , sex:"女"}) ;
	
	_stduent.print() ;

6、重写

上面的程序中，在Person类里面定义了print方法，如下：

				print:function(){
					
					alert(String.format("姓名:{0},性别:{1},角色:{2}" , this.name , this.sex , this.job)) ;
				}

如果在Student类里面再写一个同名的方法，如下：

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

这样的话, student类中的print方法就把Person类里面的同名方法重写了。

7、类别名

psn = Ext.dojochina.Person ; //下面就可以直接用psn来表示Ext.dojochina.Person 了。

8、事件：

Ext.namespace("Ext.ling") ;

Ext.ling.Person = function(){
	
	this.addEvents( //添加两个事件监听
			 "namechange",
			 "sexchange"
		 ) ;
} ;

Ext.extend(Ext.ling.Person , Ext.util.Observable , { //继承Observable类
				name:"",
				sex:"",
				setName:function(_name){
					
					if(this.name != _name){
						//事件注册，下面四个参数：事件名，类本身，该类的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 ;
					}
				}
		  }) ;

然后，写一个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" />
<title>事件</title>
<script type="text/javascript" src="../../../adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="../../../ext-all.js">
</script>
<script type="text/javascript" src="Person.js">
</script>
<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.ling.Person() ;
		//事件触发时，定义一个函数来处理，function里面的参数与事件注册后的三个参数对应
		_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 ;
				 }) ;
		
	}) ;
	
</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>