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