extjs 为某个事件设置拦截器


Posted in Javascript onJanuary 15, 2010

我们先来自定义一个事件:

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'); 
});

当点击按钮时触发事件,效果如下图所示:
extjs 为某个事件设置拦截器
现在我们使用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(),那么之前设置的所有拦截函数就都失效了。

Javascript 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
Javascript中this的用法详解
Sep 22 Javascript
javascript学习小结之prototype
Dec 03 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 #Javascript
javascript 不间断的图片滚动并可点击
Jan 15 #Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 #Javascript
javascript实现的基于金山词霸网络翻译的代码
Jan 15 #Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 #Javascript
用jQuery扩展自写的 UI导航
Jan 13 #Javascript
jQuery的一些特性和用法整理小结
Jan 13 #Javascript
You might like
php入门教程 精简版
2009/12/13 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
php绘制一个矩形的方法
2015/01/24 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
简单实例处理url特殊符号&处理(2种方法)
2013/04/02 Javascript
你必须知道的Javascript知识点之"字面量和对应类型"说明介绍
2013/04/23 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python多重继承实例
2014/10/11 Python
Python实现提取文章摘要的方法
2015/04/21 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
python如何对实例属性进行类型检查
2018/03/20 Python
Python异常处理例题整理
2019/07/07 Python
浅谈Python 参数与变量
2020/06/20 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
教师现实表现材料
2014/02/14 职场文书
班班通校本培训方案
2014/03/12 职场文书
实习指导老师评语
2014/04/26 职场文书
文明社区申报材料
2014/08/21 职场文书
社会实践的活动方案
2014/08/22 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers