extjs：为某个事件设置拦截器

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

 1  person = function(name) {
 2                 this.name = name;
 3                 this.addEvents("walk");
 4             }
 5             Ext.extend(person, Ext.util.Observable, {
 6                 info: function(event) {
 7                     return this.name + 'is' + event + 'ing.';
 8                 }
 9             });
10             var person = new person('张铭诺');
11             person.on('walk', function() {
12                 Ext.Msg.alert('event', person.name + '在走啊走啊。');
13             });

然后我们再定义一个按钮用来触发这个walk事件：

 

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

 

 

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

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

 

 1  var btn2 = new Ext.Button({
 2                 id: 'cc',
 3                 text: '拦截事件',
 4                 renderTo: Ext.getBody()
 5             });
 6             btn2.on('click', function() {
 7                 Ext.util.Observable.capture(person, function() {
 8                 alert('fsdjhf');
 9                     return true;
10                 });
11             });

 

这时单击btn2按钮，发现弹出对话框后还会触发事件，郁闷。。。。现在将最后一行代码改为return false试试？事件被拦截成功了吧！

　　这样就给我们一个选择的机会，通过控制capture（）中处理函数的返回值来决定是否继续执行某个时间的监听函数，还是直接中止该事件的发生。

     我们还可以为一个对象设置多个capture()拦截函数，这些拦截函数会形成一个处理链条，只要其中任何一个拦截函数返回false，就会中止处理过程。

     releaseCapture()函数是capture（）函数的反向操作，它会一次性清除fireEvent()上所有的拦截函数，不过我们无法通过它准确的删除某一个拦截函数。一旦执行了releaseCapture(),那么之前设置的所有拦截函数就都失效了。