当前位置: 首页 > 图文教程 > 网络编程 > Javascript > extjs 为某个事件设置拦截器

Javascript
Dhtml:浏览大图时鼠标感应控制层滚动条的移动
初试javascript :贪吃蛇啊
只让输入数字的输入框
只能输入汉字的输入框
在JS中定义数组删除方法
在网页中使用realplayer播放rm文件
用层实现为网页中的图添加水印的效果
所见即所得编辑器 aynHTML 大全:(一)如何部署、嵌入、装载动态内容
JavaScript 收集的两个小代码!
JScript中正则表达函数的说明与应用
网页上内容导出到word里
关于开发在线网页编辑器按回车会输入<p>而不是<br>的解决方法
OOP In JS [JS脚本中的面向对象]
一个很通用的javascript的下拉菜单
将金额小写转化成汉字大写
VML Chart 控件
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Javascript实例教程(21) OLE Automation(4)
javascript进行客户端数据的校验
JavaScript 小技巧(第三集)

Javascript 中的 extjs 为某个事件设置拦截器


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-20   浏览: 117 ::
收藏到网摘: n/a

Ext.util.Observable有一个重要的功能,可以为某个事件设置拦截器,统一管理方法的处罚。使用capture()和releaseCapture()来实现这个功能。 我们先来自定义一个事件:
复制代码 代码如下:

person = function(name) {
this.name = name;
this.addEvents("walk");
}
Ext.extend(person, Ext.util.Observable, {
info: function(event) {
return this.name + 'is' + event + 'ing.';
}
});
var person = new person('张铭诺');
person.on('walk', function() {
Ext.Msg.alert('event', person.name + '在走啊走啊。');
});

然后我们再定义一个按钮用来触发这个walk事件:
复制代码 代码如下:

var btn = new Ext.Button({
id: 'walk',
text: '触发事件按钮',
renderTo: Ext.getBody()
});
btn.on('click', function() {
person.fireEvent('walk');
});

当点击按钮时触发事件,效果如下图所示:

现在我们使用capture()函数拦截事件的触发,如下面的代码所示:
复制代码 代码如下:

var btn2 = new Ext.Button({
id: 'cc',
text: '拦截事件',
renderTo: Ext.getBody()
});
btn2.on('click', function() {
Ext.util.Observable.capture(person, function() {
alert('fsdjhf');
return true;
});
});

这时单击btn2按钮,发现弹出对话框后还会触发事件,郁闷。。。。现在将最后一行代码改为return false试试?事件被拦截成功了吧!
  这样就给我们一个选择的机会,通过控制capture()中处理函数的返回值来决定是否继续执行某个时间的监听函数,还是直接中止该事件的发生。
我们还可以为一个对象设置多个capture()拦截函数,这些拦截函数会形成一个处理链条,只要其中任何一个拦截函数返回false,就会中止处理过程。
releaseCapture()函数是capture()函数的反向操作,它会一次性清除fireEvent()上所有的拦截函数,不过我们无法通过它准确的删除某一个拦截函数。一旦执行了releaseCapture(),那么之前设置的所有拦截函数就都失效了。