- 浏览: 88387 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
hzxlb910:
背景看的头晕
extJs 2.1学习笔记(Ext.data.JsonReader篇一) -
whyang:
先鄙视一下这个论坛,要做测试才能回复。
我是想问下楼主,
第 ...
Struts2的异常处理机制:
本来,我也没把这档子事放在眼里,因为简单,例如:
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的属性,用它可以定义快捷键。
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的属性,用它可以定义快捷键。
发表评论
-
Extjs3.0的变动记录(转载)
2009-09-24 11:23 2907Release Date: Jul 6, 2009 Curr ... -
Ext中TreePanel控件和TabPanel控件搭配测试
2009-08-25 13:51 1562在实际的项目中,左边树形菜单,提供各种功能点击,右边一个面板, ... -
extJs 2.1学习笔记(Ext.Updater篇二)
2009-08-05 22:02 1541全 称:Ext.Updater 命名 ... -
extJs 2.1学习笔记(Ext.Updater篇一)
2009-08-05 22:00 1167上几篇中老老实实地把E ... -
extJs 2.1 学习笔记(Ext.data.HttpProxy篇)
2009-08-05 21:59 2415关于Ext.data中各个类的 ... -
extJs 2.1学习笔记(Ext.data.JsonReader篇一)
2009-08-05 21:58 2073有个事要说一下:DataProxy的子类呢,都有一个load来 ... -
extJs 2.1学习笔记(Ext.data.JsonReader篇二)
2009-08-05 21:57 1241有了上一篇中所讲内容,一般情况下就可以应付了,不过,Jso ... -
extJs 2.1学习笔记(Ext.TabPanel篇)
2009-08-05 21:56 1394Ext.TabPanel这个东西是最常用的组件之一,它继承 ... -
extJs 2.1学习笔记(Function扩展篇)
2009-08-05 21:55 927ExtJs对JavaScript的内建对象进行了扩展,对什么O ... -
extJs 2.1学习笔记(Ext.data.Store篇)
2009-08-05 21:54 1476Ext.data.Store,这个东西是JavaScript ... -
extJs 2.1学习笔记(Ext.data.Connection篇二)
2009-08-05 21:54 1693上一篇主要是扎扎实实地翻译了一下Ext.data.Connec ... -
extJs 2.1学习笔记(Ext.data.Connection篇一)
2009-08-05 21:52 1348ExtJs之所以能异步请求数据,全依赖于Ext.data. ... -
extJs 2.0学习笔记(Ext.Panel终结篇)
2009-08-05 21:49 1112怪不得我对Ext.Panel穷追猛打,前面已经写过四篇针对它的 ... -
extJs 2.0学习笔记(Ext.Panel篇四)
2009-08-05 21:46 1666我刚才禁不住诱惑去看 ... -
extJs 2.0学习笔记(Ext.Panel篇三)
2009-08-05 21:45 1883上一篇中把panel的config部分的文档翻译了一下,事实 ... -
extJs 2.0学习笔记(Ext.Panel篇二)
2009-08-05 21:44 1350activeItem : String/Number 用 ... -
extJs 2.0学习笔记(Ext.Panel篇一)
2009-08-05 21:42 1194原文链接: http://hi.baidu ... -
EXT 中 类的继承
2009-07-31 09:36 974深入剖析ExtJS 2.2实现及 ... -
Ext架构分析:render方法
2009-07-16 08:51 5046Ext架构分析(3)--Widget之 ... -
Ext 2 概述
2009-07-16 08:48 786原文链接 http://hi.baidu.com/xcl1 ...
相关推荐
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)--...
extjs2.0.rar extjs2.0.rar extjs2.0.rar extjs2.0.rar
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