事件举例 Ext.get("elem").on("click",{fn:function(){alert("此元素被单击了!");}}; 这样的代码谁不会写啊。一个on就了结了。但是,今天,我在研究Ext.Panel的tbar时,发现,那现工具栏按钮的事件注册不一样: 元素注册、组件注册都是:{fn:……} 工具栏按钮的事件注册:{handler:……} 嘿,我就在想,为什么Ext的作者就不统一一下呢,都是fn多好。省得我分心了。一不小心准搞错了。还好,不是fn就是handler,凡是工具栏上面的东西注册事件,
一般都是用handler,平常组件注册事件统统都用fn。 关于组件的事件注册,一般都是创建时就定义好,而不是创建后再来on。所以,用extjs写程序,常常看到Ext.onReady里面嵌套了无数层,
items里面还有items,items里面还有listeners。然后listeners里面定义事件处理器。这样,代码就比较难看了。有人说:extJs写的代码莫名其妙。
呵呵,可见大伙不大喜欢这种写法啊。 关于事件处理,我把Element的API文档翻译了一下。事实上事件注册都是建立在Element之上的。 一、元素的事件注册 on( String eventName, Function fn, [Object scope], [Object options] ) : void 其中: eventName:String 事件名称 fn:Function 事件处理函数,它有三个参数 evt:EventObject 事件对象 t:Element 事件发生的目标Element,注意:它将被delegate选项所筛选(很有用)。 o:Object addListener函数传入的options对象。 scope:Object 范围 options:Object 选项参数 一个包含了事件配置属性的对象,它可能包括如下属性: scope {Object} :它表示事件处理函数的执行范围,即处理函数时面的this的上下文。 delegate {String} :一个简单的selector,用于过滤target或者找target的子孙。 stopEvent {Boolean} :为true就停止事件,即停止事件的传播和阻止默认行为。 preventDefault {Boolean} :阻止默认行为 stopPropagation {Boolean}:停止事件的传播 normalized {Boolean} : 为false的话就传递一个浏览器的原装事件对象给函数,而不是Ext.EventObject。 delay {Number} : 这个值表示事件发生后多少毫秒,事件处理函数才被执行。 single {Boolean} : 为真的话呢就表示这个事件处理器只执行一次,之后自删除。 buffer {Number} :它的作用就是执行缓冲,有时候,用户点按钮做死的点,一秒点它几十次,难道让事件处理函数执行几十次吗?其实,
用户并不一定是执行多次。如果真的就这样老老实实执行了,很可能就坏事了,做了无用功。 这个值表示,在事件发生后,事件处理函数将放到Ext.util.DelayedTask中去计划执行,多少毫秒之内,如果再次发生同一事件,那么,
这一事件将覆盖原来的事件。只执行后面那一次,当然,那个缓冲时间也在后一次时被刷新。 组合Options中的选项 在下面的例子中,on这种快捷的方式比冗长的addListener好用的多了。两者是等价的。使用Options作参数,它能组合多种不同的事件处理器: 一个普通的,能延时执行的,只执行一次的,能自动停止事件的,还有一个自定义参数(forumId)在options对象,这个Options对象是合法的。代码如下: el.on('click', this.onClick, this, { single: true, delay: 100, stopEvent : true, forumId: 4 }); 一次注册多个事件 这个方法也允许只传一个config,但是一个config中包含多个事件处理信息。代码如下: el.on({ 'click' : { fn: this.onClick, scope: this, delay: 100 }, 'mouseover' : { fn: this.onMouseOver, scope: this }, 'mouseout' : { fn: this.onMouseOut, scope: this } }); 或者是以下简捷语法: el.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut, scope: this }); 上面是一般事件,还有快捷键注册的问题,事实上,Ext对快捷键这个功能的封装其实就是对keypress这个事件的改造。
怎样定义快捷键映射呢,Ext.Element.addKeyMap(config)。所以,问题的重心又到了config这个东西了。我找到Ext.KeyMap这个类,研究一下: config的属性有: key:number/string/Array,例如: key: 13, // or Ext.EventObject.ENTER key: "a/r/n/t" key: [10,13], //回车键被按了 key: "abc" //按了a或b或c key: "/t" 由上可知,可以是设成单个按键,也可是多个按键,可是ascii码,也可以是那个字母。 fn:Function 相关联的处理函数,例如: fn: function(){ alert("Return was pressed"); } ctrl:Boolean shift:Boolean Alt:Boolean scope:Object 总结上面,Element中的事件注册方法都差不多。 二、关于组件上的事件注册 组件的事件注册有它的特点了,尽管本质上还是on、un。如果用on、un,它的语法跟Element的语一样,没什么差别,关键是,
组件允许在创建时的 config中用listeners:{xxx:{},yyyy:{}}的形式的注册事件。不过,listeners里面的写法跟on的组合写法是一样的。这个我研究了。例如: listeners:{'select': {fn:this.sortImages, scope:this}} 还是:事件名:options 组件没有什么快捷键关联的功能,不过,能通过元素的快捷键注册功能来得到。这个没什么问题。Ext.Window 有一个Keys config的属性,用它可以定义快捷键。