extjs 为某个事件设置拦截器
更新时间：2010年01月15日 16:32:04 作者：
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(),那么之前设置的所有拦截函数就都失效了。
复制代码 代码如下:
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(),那么之前设置的所有拦截函数就都失效了。
相关文章
今天需要在grid中嵌入combobox，在网上找了好久也没有找到一个正确可行的方法，可能是版本问题（我版本是extjs 3.0），没有继续研究其原因，自己查找资料，终于实现功能。现在分享一下代码。2011-01-01
ExtJs是一个非常好的客户端JavaScript，他的很多空间都可以自定义而且也可以扩展。2010-03-03
最近开始自学ExtJs，下载了些视频和上网搜了些相关文章和文档准备好好学学，今晚第一次接触ExtJs的事件机制，刚开始感觉有点晕，和以前所接触的VB或是纯的JAVASCRIPT的实现方式有些区别。根据一个例子，来分析和总结一下这个流程吧。2010-10-10
在Ext的使用过程中，一不留心就出现了乱码，包括在客户端提交给服务器的数据中出现了乱码和服务器端返回给客户端的数据中出现了乱码，下面简单分析一下出现乱码的原因。2009-04-04
ExtJS TextField常用方法2009-10-10
ExtJs grid行 右键菜单的两种方法，需要用extjs制作右键菜单的朋友可以参考下。2010-06-06
最近调试EXTJS 4的treegrid实例，看了很多水友的文章，以及官方的demo，没一个可靠的，于是乎自己折腾中...感兴趣的朋友可以了解下本文或许对你有所帮助2013-07-07
这段时间手中项目已经完成，空闲时间较多。开始了学习ExtJs之旅。2010-11-11
Ext.util.Observable有一个重要的功能，可以为某个事件设置拦截器，统一管理方法的处罚。使用capture()和releaseCapture()来实现这个功能。2010-01-01
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
由于开发过程中大多用chrome来调试，很少在ie中调试（现在两者都要兼顾），导致最后在ie中页面不能正常加载，当时那个囧啊，看到ie报的错，我都想哭，连出错的堆栈信息都没有（这一点，ie做的真不好），无从下手啊2013-01-01
最新评论