extjs2.0---事件处理

最新推荐文章于 2024-08-23 15:54:50 发布
最新推荐文章于 2024-08-23 15:54:50 发布
阅读量572 收藏
点赞数
分类专栏： EXTJS 文章标签： extjs button function delay java buffer

 Extjs里的事件处理,只有继承了Ext.util.Observable类才具有事件功能

1.先看一个简单点的例子

Java代码
  1. //Extjs里的事件处理,只有继承了Ext.util.Observable类才具有事件功能   
  2.   
  3. Employee = function(){  
  4.     this .addEvents( "test" ); //注册事件,该事件名字为：test   
  5. }  
  6.   
  7. Ext.extend(Employee,Ext.util.Observable);  
  8.   
  9. todo = function(){  
  10.     alert("event was fired" );  
  11. }  
  12.   
  13. var em = new  Employee();  
  14. em.on("test" ,todo); //将方法绑定到事件test上   
  15. em.fireEvent("test" ); //触发事件test    
//Extjs里的事件处理,只有继承了Ext.util.Observable类才具有事件功能

Employee = function(){
	this.addEvents("test");//注册事件,该事件名字为：test
}

Ext.extend(Employee,Ext.util.Observable);

todo = function(){
	alert("event was fired");
}

var em = new Employee();
em.on("test",todo);//将方法绑定到事件test上
em.fireEvent("test");//触发事件test




2.
页面代码：

Java代码
  1. <input type= "button"  name= "button1"  id= "button1"  value= "button1"  />   
<input type="button" name="button1" id="button1" value="button1" />



js代码：

Java代码
  1. todo = function(){  
  2.     alert("event was fired" );  
  3. }  
  4.   
  5. //window.onload = function(){}等价于Ext.onReady(function(){});页面加载完后就执行该函数   
  6. Ext.onReady(function() {  
  7.         //返回的button1是Observable的子类，所以具有事件处理功能   
  8.         var button1 = Ext.get("button1" ); //返回的Element对象,不等价于document.getElementById("button1")   
  9. //      var button1 = Ext.getDom("button1");//返回的HTMLElement对象,等价于document.getElementById("button1");   
  10.           
  11.         alert(button1.id);//button1   
  12.           
  13. //      button1.addListener("click",todo);//addListener与on是一样   
  14. //      button1.addListener("mouseover",todo);   
  15.           
  16.           
  17.         //通过EventManager来实现   
  18.         Ext.EventManager.addListener(button1,"click" ,todo);  
  19.         Ext.EventManager.addListener(button1,"mouseover" ,todo);  
  20.           
  21.     }  
  22. )   
todo = function(){
	alert("event was fired");
}

//window.onload = function(){}等价于Ext.onReady(function(){});页面加载完后就执行该函数
Ext.onReady(function() {
		//返回的button1是Observable的子类，所以具有事件处理功能
		var button1 = Ext.get("button1");//返回的Element对象,不等价于document.getElementById("button1")
//		var button1 = Ext.getDom("button1");//返回的HTMLElement对象,等价于document.getElementById("button1");
		
		alert(button1.id);//button1
		
//		button1.addListener("click",todo);//addListener与on是一样
//		button1.addListener("mouseover",todo);
		
		
		//通过EventManager来实现
		Ext.EventManager.addListener(button1,"click",todo);
		Ext.EventManager.addListener(button1,"mouseover",todo);
		
	}
)




3.

Java代码
  1. todo = function(){  
  2.     alert(this .id); //此处的this由addListener的第3个参数决定   
  3. }  
  4.   
  5.   
  6. Ext.onReady(function() {  
  7.         //返回的button1是Observable的子类，所以具有事件处理功能   
  8.         var button1 = Ext.get("button1" );  
  9.           
  10.         //先打印出button1,再打印出ext-gen1,刚好与addListener添加的顺序相反   
  11.         button1.addListener("click" ,todo, this ); //todo函数打印出:ext-gen1   
  12.         button1.addListener("click" ,todo,button1); //todo函数打印出:button1   
  13.     }  
  14. )   
todo = function(){
	alert(this.id);//此处的this由addListener的第3个参数决定
}


Ext.onReady(function() {
		//返回的button1是Observable的子类，所以具有事件处理功能
		var button1 = Ext.get("button1");
		
		//先打印出button1,再打印出ext-gen1,刚好与addListener添加的顺序相反
		button1.addListener("click",todo,this);//todo函数打印出:ext-gen1
		button1.addListener("click",todo,button1);//todo函数打印出:button1
	}
)



4.

Java代码
  1. todo = function(){  
  2.     alert(this .id); //此处的this由addListener的第3个参数决定   
  3. }  
  4. Ext.onReady(function(){  
  5.         var button1 = Ext.get("button1" );  
  6.         //addListener 的第4个参数是个配置选项，所以需要用{},有4个配置选项，delay(触发事件多久后执行指定的函数),scope(如果第3个参数设置了,此处可以 省),single(事件触发一次后，就被移走，以后再触发该事件无效),buffer（缓存区，也就是多长时间内触发该事件大于1次都认为是1次）   
  7.         //delay和buffer同时使用时有错误，具体原因还不知道是为什么?   
  8.         button1.addListener("click" ,todo,button1,{delay: 3000 ,single: false }); //因为button1也属于Observable类的子类，所以查看文档时可以直接查看Observable中的addListener方法   
  9.     }  
  10. )   
todo = function(){
	alert(this.id);//此处的this由addListener的第3个参数决定
}
Ext.onReady(function(){
		var button1 = Ext.get("button1");
		//addListener的第4个参数是个配置选项，所以需要用{},有4个配置选项，delay(触发事件多久后执行指定的函数),scope(如果第3个参数设置了,此处可以省),single(事件触发一次后，就被移走，以后再触发该事件无效),buffer（缓存区，也就是多长时间内触发该事件大于1次都认为是1次）
		//delay和buffer同时使用时有错误，具体原因还不知道是为什么?
		button1.addListener("click",todo,button1,{delay:3000,single:false});//因为button1也属于Observable类的子类，所以查看文档时可以直接查看Observable中的addListener方法
	}
)



5.

Java代码
  1. //window.onload = function(){}等价于Ext.onReady(function(){});  页面加载完后就执行该函数   
  2. Ext.onReady(function(){  
  3.         alert("ok1" );  
  4.         function AA(){  
  5.             alert("ok2" );  
  6.         }  
  7.     }  
  8. )  
  9. //只会打印出ok1,ok2不会被打印出来。因为页面加载完后会去执行函数function()，但是function()函数里的函数(或叫类)AA则不会去执行的。    
//window.onload = function(){}等价于Ext.onReady(function(){});  页面加载完后就执行该函数
Ext.onReady(function(){
		alert("ok1");
		function AA(){
			alert("ok2");
		}
	}
)
//只会打印出ok1,ok2不会被打印出来。因为页面加载完后会去执行函数function()，但是function()函数里的函数(或叫类)AA则不会去执行的。

 

Java代码
  1. Ext.onReady(function(){  
  2.         alert("ok1" );  
  3.         function AA(){  
  4.             alert("ok2" );  
  5.         }  
  6.         new  AA();  
  7.     }  
  8. )  
  9.   
  10. //这样ok1和ok2都会被打印出来，因为new AA()去调用了    
Ext.onReady(function(){
		alert("ok1");
		function AA(){
			alert("ok2");
		}
		new AA();
	}
)

//这样ok1和ok2都会被打印出来，因为new AA()去调用了




6.等价写法：

Java代码
  1. todo = function(){  
  2.     alert(this .id); //此处的this由addListener的第3个参数决定   
  3. }  
  4. Ext.onReady(function(){  
  5.         var button1 = Ext.get("button1" );  
  6.           
  7.         //第一种写法   
  8. //      button1.addListener("click",todo,button1);   
  9. //      button1.addListener("mouseover",todo,button1);   
  10.           
  11.         //第二种写法   
  12. //      button1.on({click:todo,mouseover:todo,scope:button1});   
  13.   
  14.         //第三种写法   
  15.         button1.on(  
  16.             {  
  17.                 click:{scope:button1,delay:3000 ,fn:todo},  
  18.                 mouseover:{scope:button1,delay:1000 ,fn:todo}  
  19.             }  
  20.         );  
  21.           
  22.           
  23.           
  24.     }  
  25. )   
todo = function(){
	alert(this.id);//此处的this由addListener的第3个参数决定
}
Ext.onReady(function(){
		var button1 = Ext.get("button1");
		
		//第一种写法
//		button1.addListener("click",todo,button1);
//		button1.addListener("mouseover",todo,button1);
		
		//第二种写法
//		button1.on({click:todo,mouseover:todo,scope:button1});

		//第三种写法
		button1.on(
			{
				click:{scope:button1,delay:3000,fn:todo},
				mouseover:{scope:button1,delay:1000,fn:todo}
			}
		);
		
		
		
	}
)



7.

Java代码
  1. Ext.onReady(  
  2.     function(){  
  3.         alert("ok1" ); //ok1   
  4.         AA = function(){  
  5.             alert("ok2" ); //ok2         
  6.         };  
  7.         //同时定义多个属性和方法   
  8.         AA.prototype = {  
  9.             aa:1 ,  
  10.             bb:2 ,  
  11.             a:function(){  
  12.                 alert("aa" ); //因为没有调用，所以不会打印出来   
  13.             },  
  14.             b:function(){  
  15.                 alert("bb" ); //因为没有调用，所以不会打印出来   
  16.             }  
  17.         }  
  18.         new  AA();  
  19.           
  20.     }  
  21. )   
Ext.onReady(
	function(){
		alert("ok1");//ok1
		AA = function(){
			alert("ok2");//ok2		
		};
		//同时定义多个属性和方法
		AA.prototype = {
			aa:1,
			bb:2,
			a:function(){
				alert("aa");//因为没有调用，所以不会打印出来
			},
			b:function(){
				alert("bb");//因为没有调用，所以不会打印出来
			}
		}
		new AA();
		
	}
)



8.事件处理EventObject

Java代码
  1. Ext.onReady(function(){  
  2.     var win = new  Ext.Window({  
  3.         title:'hello' ,  
  4.         html:'world' ,  
  5.         width:400 ,  
  6.         height:300   
  7.     });  
  8.     win.show();  
  9.     //查看Extjs的文档：Ext.Window中的Public Events部分查看到:move : ( Ext.Component this, Number x, Number y ) ,默认3个参数，所以才有得下面函数的c,x,y   
  10.     win.on("move" ,moving);  
  11. })  
  12.   
  13. moving = function(c,x,y){  
  14.     alert(c.id);  
  15.     alert(x);  
  16.     alert(y);  
  17. }   
Ext.onReady(function(){
	var win = new Ext.Window({
		title:'hello',
		html:'world',
		width:400,
		height:300
	});
	win.show();
	//查看Extjs的文档：Ext.Window中的Public Events部分查看到:move : ( Ext.Component this, Number x, Number y ) ,默认3个参数，所以才有得下面函数的c,x,y
	win.on("move",moving);
})

moving = function(c,x,y){
	alert(c.id);
	alert(x);
	alert(y);
}



另一个例子:


页面代码：

Java代码
  1. <a href= "http://www.baidu.com"  id= "baidu" >百度</a>   
<a href="http://www.baidu.com" id="baidu">百度</a>


js代码：

Java代码
  1. //事件处理EventObject   
  2.   
  3. todo = function(e){//EventObject,在这里可以理解为：EventObject是HTMLElement对象的click事件的默认参数   
  4.     alert(this .id); //baidu   
  5.     var htmlEl = e.getTarget();//返回值是HTMLElement,得到事件触发的目标，这里也就是指<A>连接标签   
  6.     alert(htmlEl.innerText);//打印出:"百度"  （HTMLElement有innerHTML和innnerText方法。 Element没有）   
  7.     e.stopEvent();//阻止事件继续发生，也就是<A>标签不会跳转到baidu页面了   
  8.       
  9.     //获得实际传递参数值   
  10.     alert(arguments.length);//3   
  11.     alert(arguments[2 ].aa); //test   
  12.     alert(arguments[2 ][ "aa" ]); //test   
  13.       
  14. }  
  15. Ext.onReady(  
  16.     function(){  
  17.         var  baidu = Ext.get("baidu" );  
  18.         baidu.on("click" ,todo,baidu,{aa: 'test' });  
  19.     }  
  20. ) 
kinglino520
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[ExtJS] 监听事件
拒绝成猿的程序员
09-20 7752
在ExtJS中，常见的监听事件一般用listeners，如下： { xtype:'控件名', liteners:{ 事件名:'方法名' } } //demo { xtype:'textfield', liteners:{ blur:'onBlur' } } 或者是单个控件on绑定 var wgt = Ext...
ExtJS2.0开发与实践笔记[0]——初识ExtJS
热门推荐
【Java究竟怎么玩?】
03-11 4万+
ExtJS2.0开发与实践笔记[0]——初识ExtJS简短的前言：随着网络技术的发展，良好的用户体验及丰富的客户端功能已成为Web程序所共同追逐的目标，并扮演非常重要的一环。基于Ajax应用思想的盛行，prototype、ext、dojo、yui、mootools等越来越多的第三方开源Javascript Library开始涌现，虽然这极大地增加了我们对web应用的扩展可能性，但同时也或多
总结Ext中的事件应用
天使的足迹
07-14 764
以下例子都是以panel作为句柄，假设在panel上增加事件。    a、使用addListeners：        addListener( String eventName, Function fn, Object scope, Object options )         panel.addListeners('click',function(){alert('点击事件')},this);    b、使用addEvents自定义事件:        addEvents(Object o)    
ExtJs源码分析与学习—ExtJs事件机制（一）
linder0209的专栏
03-15 231
      前面讲了ExtJs核心代码以及扩展后，今天来说说ExtJs的事件机制，要想弄明白ExtJs的事件机制，就必须先知道浏览器的事件机制，这里给出了浏览器事件机制与自定义事件的实现 。        首先看源码 ext-base-event.js 关于浏览器本身事件的封装。代码中实现了各主要浏览器的兼容，以及对一些事件进行了扩展。该代码中首先定义了类Ext.lib.Event，该...
学习ExtJs
MTF的博客
01-26 666
beforeload : ( Object this, Object params ) 在一个获取数据对象的网络请求被发出之前触发。 beforeload : ( Store this, Object options ) 在提交新的数据请求之前触发。 如果beforeload事件的处理器返回false，加载操作将被撤销。 load : ( Object this, Object o, ...
Extjs listeners 通过属性来指定监听事件执行次数
HouYing
11-20 6005
* myGridPanel.on({ * cellClick: {fn: this.onCellClick, scope: this, single: true}, * mouseover: {fn: panel.onMouseOver, scope: panel} * });
ExtJS2.0.rar_extjs2.0
09-24
10. **API文档**："ExtJS2.0实用简明教程.chm"中详细介绍了2.0版本的API，包括各个组件、方法和事件，是学习和开发的重要参考资料。 在实际开发中，通过阅读并实践这本教程，你可以了解到如何初始化一个ExtJS应用，...
EXTJS2.0.rar_extjs2.0
09-24
ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。
深入浅出ExtJS随书源码--EXTJS2.0
04-19
"深入浅出ExtJS随书源码--EXTJS2.0"是针对ExtJS 2.0版本的学习资源，通常与一本相关书籍配套，帮助读者通过实际代码加深对ExtJS的理解。 源码分析： 1. **组件系统**：ExtJS的核心是其组件模型，其中包括各种可...
ExtJS 2.0实用简明教程.rar
07-09
ExtJs最开始基于YUI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。
extjs组件添加事件监听的三种方式
y6300023290的专栏
02-08 2万+
1.在定义组件配置的时候设置 xtype : 'textarea', name : 'dataSetField', labelSeparator:'', fieldLabel:'', hideLabel: true, allowBlank: true, height: mainPanelHeight*0.8, anchor:'99%', listeners:{'b
ExtJs 入门教程十二[监听器：listeners]
330553352的专栏
07-01 2209
对象的监听器
ExtJs组件监听事件
在你最感兴趣的事物上，隐藏着你人生的秘密
09-27 3万+
extjs对组件添加监听的常用三种方式  (1)在定义组件的配置时设置 如代码中所示：  xtype : 'textarea', name : 'test', labelSeparator:'', fieldLabel:'', hideLabel: true, allowBlank: true, height: mainPanelHeight*0.8,
开发多线程程序时，需要注意那些问题
最新发布
OO_SEN的博客
08-23 537
线程安全 竞态条件（Race Condition）：当多个线程同时访问和修改共享资源时，可能会出现竞态条件，导致不确定的行为。需要通过同步机制（如互斥锁、读写锁、原子操作）来保护共享资源。 死锁（Deadlock）：当两个或多个线程相互等待对方释放锁时，程序会陷入死锁状态。避免死锁的一些策略包括：避免嵌套锁、确保加锁顺序一致、使用超时机制等。 活锁（Livelock）：与死锁不同，活锁是指线程不断地尝试获取资源但总是失败，导致无法继续执行。避免频繁重试操作或使用退避算法可以减少活锁的发生。 优先级反转（P
Yolov8：模型部署到安卓端
m0_70694811的博客
08-21 777
下载安装jdk-8u202-windows-x64.exe，这篇文章有百度网盘资源链接，直接下载，并按照这篇文章的JDK步骤进行安装和环境变量配置。C:\Program Files\Java\jdk-1.8\bin和C:\Program Files\Java\jdk-1.8\jre\bin。比如因为我的jdk路径是C:\Program Files\Java\jdk-1.8，所以这两个相对路径就改成。参考这边文章的USB驱动设置和手机端设置。同意协议后，下载相应版本的JDK。
@Transactional中使用线程锁导致了锁失效与解决方案
liuruiaaa的博客
08-23 741
@Transactional中使用线程锁导致了锁失效与解决方案
JavaScript 错误 - Throw 和 Try to Catch的使用
逆风优雅的博客
08-23 129
trycatchthrow上面的代码 因为 try中 没有adddlert这个方法，或者这个方法有误，这时，代码会执行catch部分。JavaScript 实际上会创建带有两个属性的Error 对象name和message。
使用Java通过身份证号码匹配省市县名称的技术博客
weixin_41489908的博客
08-21 347
每日自动更新各类学习教程及工具下载合集​​在中国，身份证号码包含了持有人的出生地信息。通过解析身份证号码的前六位，我们可以获取对应的省、市、县（区）信息。在这篇博客中，我们将探讨如何使用Java代码来实现这一功能，并展示详细的代码示例和运行结果。
ExtJS2.0入门：TreePanel事件处理与示例
"这篇文档是关于ExtJS 2.0的入门学习资料，特别是讲解了TreePanel组件的使用，特别是事件处理中的函数。文档通过一个简单的示例展示了如何创建一个包含根节点和子节点的TreePanel，并添加点击事件监听器。此外，还...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值