EXT事件队列

最新推荐文章于 2025-06-21 09:45:00 发布

最新推荐文章于 2025-06-21 09:45:00 发布 · 104 阅读

文章标签：

#EXT #HTML

前端专栏收录该内容

18 篇文章

订阅专栏

本文通过一个具体的ExtJS应用案例，展示了如何使用事件驱动机制来更新用户界面元素，并同步反映对象属性的变化。此实例中创建了一个自定义的Person类，该类能够监听姓名和性别属性的变化，并触发相应的事件。

person.js


//事件对列

//用来定义一个命名空间,就像在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>