日期:2014-05-16  浏览次数:20367 次

Extjs复习笔记(二)

用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 ,