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 , { //继承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>