<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>事件队列</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext/ext-all.js"></script>
<script type="text/javascript">
Person = function(){
// 注册事件
this.addEvents("idChangeEvent","nameChangeEvent");
};
Ext.extend(Person,Ext.util.Observable,{
id:0,
name:"",
setId:function(_id) {
if (this.id != _id) {
// 发布事件
this.fireEvent("idChangeEvent",this,this.id,_id);
// 如果新的id与原来的id不一样,则将新的id的值设置到当前对象的id上。
this.id = _id;
}
},
setName:function(_name){
if (this.name != _name) {
// 发布事件
this.fireEvent("nameChangeEvent",this,this.name,_name);
this.name = _name;
}
},
print:function(){
alert(String.format("id={0},name={1}",this.id,this.name));
}
});
var person = null;
btn_click = function(){
person.setId(prompt("请输入编号:"));
person.setName(prompt("请输入姓名:"));
};
Ext.onReady(function(){
var id_txt = Ext.get('id_txt');
var name_txt = Ext.get('name_txt');
person = new Person();
/**
* idChangeEvent事件触发2次,
* 第一次用来设置文本框的值。
* 第二次用来设置文档的标题。
*/
person.on('idChangeEvent',function(person,old,_new){
id_txt.dom.value = _new;
});
person.on('nameChangeEvent',function(person,old,_new){
name_txt.dom.value = _new;
});
person.on('idChangeEvent',function(person,old,_new){
document.title = _new;
});
});
</script>
</head>
<body>
<h4>Ext事件队列</h4>
编号:<input type='text' id='id_txt' disabled="disabled"><br>
姓名:<input type='text' id='name_txt' disabled="disabled"><br>
<input type="button" οnclick="btn_click();" value='输入信息'>
<input type="button" οnclick="person.print();" value='获取输入信息'>
</body>
</html>
效果图: