EXT事件队列
person.js
person.html
//事件对列
//用来定义一个命名空间,就像在JAVA中的包名一样
Ext.namespace("Ext.dojochina");
//定义一个类,同时设置构造函数
Ext.dojochina.Person = function(){
//定义事件
this.addEvents(
"namechange",
"sexchange"
);
}
//继承
Ext.extend(Ext.dojochina.Person , Ext.util.Observable,{
name:"",
sex:"",
setName:function(_name){
if(this.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;
}
}
})
person.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../EXTJS/resources/css/ext-all.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>事件对列</title>
<script type="text/javascript" src="../../EXTJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../EXTJS/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.dojochina.Person();
//定阅事件
_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>