EXT事件队列

最新推荐文章于 2019-08-31 18:35:42 发布

浊酒愚人

最新推荐文章于 2019-08-31 18:35:42 发布

阅读量78

点赞数

分类专栏：前端文章标签： EXT HTML

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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>

浊酒愚人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EXT事件队列

person.js[code="js"]//事件对列//用来定义一个命名空间,就像在JAVA中的包名一样Ext.namespace("Ext.dojochina");//定义一个类,同时设置构造函数Ext.dojochina.Person = function(){ //定义事件 this.addEvents( "namechange",...
复制链接

扫一扫

专栏目录