`

EXT事件队列

    博客分类：
  • EXT
EXTHTML 
阅读更多
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>



分享到：
| EXT基础
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics