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 相关文章推荐
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
js获取系统的根路径实现介绍
Sep 08 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
js实现小球在页面规定的区域运动
Jun 16 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
关于Intype一些小问题的解决办法
2008/03/28 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
php数组去重复数据示例
2014/02/25 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
jquery 插件开发备注
2010/08/27 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
js读取cookie方法总结
2014/10/31 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
pytyon 带有重复的全排列
2013/08/13 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
Pyqt5实现英文学习词典
2019/06/24 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
keras topN显示,自编写代码案例
2020/07/03 Python
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
自我鉴定模板
2013/10/29 职场文书
同事吵架检讨书
2014/02/05 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
学校食品安全实施方案
2014/06/14 职场文书
早上好问候语大全
2015/11/10 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL