《ExtJS 3详解与实践》阅读补充资料:capture()捕获事件

静态方法Ext.util.Observable.capture()是一项有趣的功能,它能够将一项事件进行捕获,跟踪该事件发生的经过。捕获事件就是观察Ext JS事件的调用过程。只要是继承了
Ext.util.Observable的组件,调用capture(),便可得知该组件何时何地怎样响应事件,也算是调试组件时的技巧。

// 假设已有一个名为'myWindow'的UI组件,用Ext.getCmp()返回该对象。
Ext.util.Observable.capture(Ext.getCmp('myWindow'), function(e){
try{
console.info(e);
}catch(e){
alert(e);
}
});

 

在Firebug中运行例程如上图,运行就会有跟踪事件的效果。function(e) {console.info(e);}的作用是控制台输出事件信息(须安装有Firebug)。进入其源码,您会发现实现该功能非常简单,capture函数内只有单独一行o.fireEvent=o.fireEvent. createInterceptor(fn, scope);就是整个capture()的过程。它表示执行原事件函数后,紧接着执行fn函数,近乎于AOP(Aspect Oriented Programming)的概念。AOP

是一种编程技术,更是一种编程思想。Ext框架支持利用回调函数的概念实现了某一时刻的前、后置两个横切点的操作,Ext对Function.prototoype的原型扩展就方便了开发人员在每个切入点上自行编写扩展机制的代码,加入进行多个切入动作。若要取消捕获事件,可以执行相反的方法Ext.util.Observable. releaseCapture()将捕获的事件释放。

另外还有一个彻底的方法捕获事件,那便是用Function.createInterceptor定义新函数,然后修改

到Observable

类的原型。

// 这下所有的Ext事件都被捕获了:
Ext.util.Observable.prototype.fireEvent = Ext.util.Observable.prototype.fireEvent.createInterceptor(function(){
console.log(this.name);
console.log(arguments);
return true;
});

此处披露的内容是《ExtJS 3详解与实践》
的补充内容,完整的资料敬请参阅《ExtJS 3 详解与实践》
一书的全面介绍。

时间: 2024-09-20 06:24:58

《ExtJS 3详解与实践》阅读补充资料:capture()捕获事件的相关文章

《ExtJS 3详解与实践》阅读补充资料:编写Hello World

    使用Ext编写Ajax应用程序时,初学者往往都会感到迷惑:到底应该怎样编写Ajax程序?事实上,每个初学者都会遇到这种情况--不知该如何下手,有时只是因为一点点设置不对就卡住了整个程序的运行,连HelloWorld也可能成为新手的拦路虎.为了帮助新手尽快消除这种困惑,我们这里先为新手准备一份详尽的启动文件清单,说明清楚运行该框架的最基本条件到底是哪些:然后再简单地跑一趟对话框MessageBox作为Hello World.首先是对这份HTML文件的详解:   <!-- 标识html开始

《ExtJS 3详解与实践》阅读补充资料:Ext.extend()中使用super关键字

  既然一门语言被精简了,无论idea还是直观的语法,都务求精简的话,那么这便无形就是一个趋势,趋势往往不为人们的意志转移地转为自己的习惯,思维定性的习惯,连function这个关键字也有某仁兄觉得太长了,有缩减的必要.当然这只是开玩笑而已了.   好像Lisp那样满天 点号.冒号便是灾难.用过Ext继承的人都清楚,每每调用父类成员的时候就是Ext.subClass.superclass.methodName.call/apply(this).一整串的长,好处也是明显的,起码这种完全命名方式一个

《ExtJS 3详解与实践》阅读补充资料:用BoxComponent制作Logger UI

如果要求的UI控件不需要其他的细节的控件,也就是,仅仅是封装某部分的HTML元素的话,还要听凭布局管理器提供的大小尺寸.布局的调控,那么这个的扩展对象就是Ext.BoxComponent.例如,假设一个Logger类打算是简单地显示log信息,就可以这样定义: Ext.ns('Ext.ux.Logger'); Ext.ux.Logger = Ext.extend(Ext.BoxComponent, { tpl: new Ext.Template("<li class='x-log-entr

《ExtJS详解与实践》阅读补充资料:单页面应用程序的设计

在一般的Web GUI 中,每个应用都分散在一个页面中,会随着页面的跳转而反映在浏览器的地址栏上:稍微复杂的基于Web 系统中,都采用划分Frame 元素或打开浏览器新窗口的方式来组织页面,从浏览器的地址看起来,虽然只有一个地址,但是子Frame 的页面还是会整张页面地刷新.AJAX 改变了以往一张页面一次请求的模式,可以允许在同一张页面发起各种的请求,这样我们对于页面的组织形式有了新的途径.在单页面GUI 模型中,主页面是可以独立加载.更新和替换的一些可视元素的组合.通过这种方式,可以不必在每

《ExtJS详解与实践》阅读补充资料:Grid如何高/宽自适应

Grid高度自适应是许多用户开发过程中碰到过的问题.问题在于,尽管本类是由Panel类继承而得到的,但是不支持其基类的某些功能,所以不能都做到好像一般Panel类那样的方法来解决,如autoScroll.autoWidth.layout.items等-- Grid需要指定一个宽度来显示其所有的列,也需要一个高度来滚动列出所有的行.这些尺寸都通过配置项BoxComponent.height和Ext.BoxComponen.width来精确的指定,又或者将Grid放置进入一个带有某种布局风格的容器中

javascript凌厉开发:extjs3详解与实践的光盘代码

问题描述 javascript凌厉开发:extjs3详解与实践的光盘代码 光盘不见了,网上压根就没这资源, 书中的代码都是片断 求助... 解决方案 重买一本或者联系作者发源代码,你的图书上应该有联系方式

详解ABP框架中领域层的领域事件Domain events_基础应用

在C#中,一个类可以定义其专属的事件并且其它类可以注册该事件并监听,当事件被触发时可以获得事件通知.这对于对于桌面应用程序或独立的Windows Service来说非常有用.但是, 对于Web应用程序来说会有点问题,因为对象是根据请求(request)被创建并且它们的生命周期都很短暂.我们很难注册其它类别的事件.同样地,直接注册其它类别的事件也造成了类之间的耦合性. 在应用系统中,领域事件被用于解耦并且重用(re-use)商业逻辑. 事件总线事件总线为一个单体(singleton)的对象,它由所

详解jQuery向动态生成的内容添加事件响应jQuery live()方法_jquery

jQuery live()方法是给所有匹配的元素附加一个事件处理函数,即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效. 这个方法可以看做是 .bind() 方法的一个变体.使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有.为此需要再使用一次 .bind() 才行.比如说: <body> <div class="clickme">Click here</div> &

《Ext详解与实践》简介

内 容 简 介 富客户端程序RIA 使Web表示层的技术向前迈进了一大步,开创了图形化编程的新一代先河.在它的带动下,许多优秀的RIA开发方案相继问世.这些开发方案各有个秋,但它们都或多或少地从传统桌面程序开发中汲取了营养.随着前端技术的不断进步,以及JavaScript 引擎的速度改善,基于Ajax 方案的Ext JS也在不断进步.Ext JS及与之相关的GXT.Ext SHARP等开发工具的推出,使快速开发.基于可视化快速开发工具又向前迈进一大步. 本书以学习Ext JS的开发人员为基本读者