日期:2014-05-16 浏览次数:20506 次
用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 ,