本来,我也没把这档子事放在眼里,因为简单,例如:
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的属性,用它可以定义快捷键。
相关推荐
19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62...
19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62...
ExtJs2.0学习系列ExtJs2.0学习系列
关于ext学习的资料,有些例子 ExtJs2.0学习系列.CHM
6. ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇) 7. ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇) 8. ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇) 9. ExtJs2.0学习系列(9)--...
ExtJS 是一个很不错的Ajax 框架,可以用来开发带有华丽外观的富客户端应用,ExtJS 是一个用javascript 编写,与后台技术无关的前端ajax 框架...本教程主要是针对ExtJS2.0 进行介绍,全部代码、截图等都是基于ExtJS2.0。
Extjs2.0 智能提示
extJs2.0 中文手册 案例
ExtJS是一个很不错的Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的b...本教程记录了前段时间本人学习ExtJS的一些心得及小结,希望能帮助正在学习或准备学习ExtJS的朋友们快速走进ExtJS2.0的精彩世界。
ExtJS2.0实用简明教程和ExtJSapi
资料:包括extjs2.0源码
ExtJs2.0学习系列大全 共15个word文档,大部分介绍都在里面了
Extjs2.0中文文档,pdf文档,值得收藏。 这个是老版本,但是也应该有不少人用这个。 好东西要分享
包括ExtJS2.0及API,还包括例子,以及中文的实用开发指南。对于初学ExtJS有很大的帮助。
ajax框架之extjs2.0源码,用例,API……
这是个关于extjs的教程,在网上找到资料,带图的(好漂亮的界面)。希望对你们有用
EXTJS 2.0的官方范例,离线html格式!
Ext2 核心 API 中文详解 ExtJS2.0实用简明教程 ExtJS2.0教程 ExtJS2.0实用简明教程(easyjf) ext中文API+ sample