`

透析Extjs源码之结合API写事件响应函数

阅读更多

我在一个论坛看到EXT传递参数的问题,觉得很多学EXT的人都会碰到:
++++++++++++++++++++++++++++++++++++++++
通过示例代码中的msg-box.js
我们可以看到
Ext.get('mb1').on('click', function(e){
Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);
});
这样的代码,还有它的回调函数showResult:
function showResult(btn){
Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
};

function showResultText(btn, text){
Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
};
(这里我把两个回调函数都放上来,用来说明我的问题)
我想请教的是:其中的匿名函数function(e)、showResult(btn)及showResultText(btn, text)中的参数如何来定义,我如何才能知道这些函数的具体意义,因为这里好像没有文档可查。也许在这里提出这个问题让您不好回答,请继续往下看。我出 现这个问题是在这里遇到的:
在Layout Dialog示例中的layout.js中:
有dialog.addButton('Submit', dialog.hide, dialog);这样一行代码,也就是说增加一个submit按钮,点击后dialog隐藏。
但如果我想让这个按钮加入回调函数或获取某些特定内容的值,这样问题就出现了,我是这样实现的:
dialog.addButton('Submit', function(a,b){
alert(a);
alert(b);
}, dialog);
但我不知道function(a,b)中a和b代表什么(alert出来都是object,当我加到三个参数时就是未定义了,也就是说这个方法支持两个参数),因为好像这里没有文档。

当然,如果有其它方法来实现类似功能您也可以提出,但最好是解答一下我的问题,我不知道如何入手这个function

++++++++++++++++++++++++++++++++++++++++++



以上是我在论坛中看到的一个帖子,并且有人这样回复:

fangzhouxing 写道
这个确实是一个Ext文档不全的问题. 只能查看源代码来解决了.




这个文档中其实是有说明的,而且不含糊,你仔细看的话就能理解。
看这个前先得理解各个支持事件响应的类的on或addListener方法,它的后面两个参数表示的是什么意思?scope和options,如果你知道了,那么在事件触发的时候想调用自定义的或EXT中已有的函数就不费解了。这里scope(作用域)默认指的是事件触发时所作用的对象,而当事件触发后会传递给响应函数什么参数呢?像普通的HtmlElement对象(比如一个表单按钮)都会传一个EventObject实例对象,像EXT中自定义的函数触发的话,API中有说明:
比如Ext.MessageBox的confirm方法,是这么解释的:
confirm( String title, String msg, [Function fn], [Object scope] ) : Ext.MessageBox

Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm). If a callback function is passed it will be called after the user clicks either button, and the id of the button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).

看最后一句:and the id of the button that was clicked will be passed as the only parameter to the callback,只传递你所点击的按钮(“确认”或“取消”)的按钮本身或它的id,也就是说只有一个参数,这样的话,你的响应函数就可以定义成function(aaa){...}那么这个aaa就是这个你点击的按钮的id了。

同样,再看一下Ext.MessageBox的prompt方法,是这么解释的:
prompt( String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value] ) : Ext.MessageBox

Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt). The prompt can be a single-line or multi-line textbox. If a callback function is passed it will be called after the user clicks either button, and the id of the button that was clicked (could also be the top-right close button) and the text that was entered will be passed as the two parameters to the callback.

也就是会传递2个参数,
1、事件触发时所点击的按钮本身或按钮的id
2、在输入框中输入的文本值。
这样在你自定义或已有的响应函数你就可以这样定义了,function(first,second){...}其中第一个参数是1、中说的,第二个参数是2中说的。


另外,像EXT的API中很多组件都有Public Events这部分内容,就是会响应的事件列表,这个写法是什么意思呢?
比如,Ext.Window下的move事件,API中是这样写的:
move : ( Ext.Component this, Number x, Number y )

Fires after the component is moved.
Listeners will be called with the following arguments:

this : Ext.Component
x : Number
The new x position
y : Number
The new y position

指的是当move(窗口移动)事件发生时,会有3个参数产生,这3个参数是能够传递给你的响应函数的。那么这个时候你的响应函数就可以这样定义:
function(component,positionX,positionY){....}
(里面的参数名随便写),或者可以根据你的需要可以少定义几个参数,但是这里的话最多就是3个参数,而且是按move事件传递给你的参数顺序来的(比如第一个参数一定是Ext.Component类型的,第二个参数一定是Number类型的,并且是个x坐标值,第三个参数一定是个Number类型的,一定是个y坐标值),如果你非要这样定义:function(component,positionX,positionY,otherparam){....}
那么你的函数体里其实是获得不了otherparam的。

EXT组件中的Public Events部分都是这样的。如果理解了事件机制,那么如何定义和使用响应函数就很顺利了。

请看下面的示例代码并结合之上提的有关Ext.Window的move事件的API:

Js代码 复制代码
  1. Ext.onReady(function(){   
  2.     var win = new Ext.Window({   
  3.         title:'响应窗口移动事件的例子',   
  4.         width:400,   
  5.         height:300,   
  6.         html:'<br/><br/><p><center>这是响应窗口移动事件的例子,请注意响应函数中的参数</center></p>'  
  7.     });   
  8.     win.on("move",moving);   
  9.     win.show();   
  10. });   
  11. moving = function(c,x,y){   
  12.     alert("移动窗口的id:" + c.id);   
  13.     alert("窗口移动后的x坐标值:" + x);   
  14.     alert("窗口移动后的y坐标值" + y);   
  15. };   
  16.   
  17. //也可以这样定义:去掉注释,并把上面定义的给注释掉即可   
  18. /*  
  19. moving = function(c,x){  
  20.     alert("移动窗口的id:" + c.id);  
  21.     alert("窗口移动后的x坐标值:" + x);  
  22. }  
  23. */  
  24. //也可以这样定义:去掉注释,并把上面定义的给注释掉即可   
  25. /*   
  26. moving = function(c){   
  27.     alert("移动窗口的id:" + c.id);   
  28. }  
分享到:
评论
1 楼 JavaTestJava 2009-05-21  
不错的分析,刚转到自己的博客上去了。

相关推荐

    Extjs源码之--Ext事件机制/继承关系

    在“Extjs源码之--Ext事件机制/继承关系”中,我们将深入探讨EXTJS如何处理事件以及其类层次结构。EXTJS的事件处理主要由EventManager.js这个文件负责,它是EXTJS事件系统的基础。 首先,EXTJS的事件机制基于观察者...

    extjs源码及API

    extjs下载 extjs源码 extjsApi,全部包括在这里面

    Extjs 4.0中文版API

    Extjs 4.0中文版API

    extjs 源码

    EXTJS 3.0是其历史版本之一,提供了一套完整的组件模型、数据绑定、布局管理以及丰富的用户界面控件。这个源码包不仅包含了EXTJS 3.0的核心库,还提供了相关的文档和代码示例,这对于开发者深入理解EXTJS的工作原理...

    ExtJs源码

    extjs 源码,有兴趣的可以学习下

    extjs2 的源码以及API

    标签“extjsAPI”,“extjs”,“extjs2源码”,“API”进一步强调了主题内容,它们分别对应EXTJS的API,EXTJS框架本身,EXTJS2的源码,以及API文档的重要性。 在提供的压缩文件中,我们有以下三个关键文件: 1. `...

    Extjs 中文API文档

    Extjs 中文API文档,有对Extjs相关API的中文说明

    ExtJs 4 API中文

    ExtJs 4 API 中文

    ExtJs学习笔记 ExtJs Api

    适合ExtJs开发人员extjs技术上手以及深入

    ExtJs4官方的api文档及示例

    很实用的示例及文档。版本为4.1,对初学者以及开发人员很有帮助。 很实用的示例及文档。版本为4.1,对初学者以及开发人员很有帮助。

    extjs+demo+api

    关于API文档,ExtJS提供了详细的在线文档,包括类的定义、方法、事件、配置选项等。开发者可以通过查阅这些文档来了解每个类的功能和用法,这对于编写ExtJS代码至关重要。 在压缩包的文件名列表中提到的"extjsdemo...

    extjsapi/extjs3.4

    extjsapi,extjs文档,api手岫

    EXTJS3.0中文API (离线)

    7. **事件处理**:EXTJS的事件驱动模型允许开发者通过监听和响应事件来控制应用的行为。它支持组件间事件、DOM事件和自定义事件。 8. **工具栏和菜单**:EXTJS提供了工具栏(Toolbar)和下拉菜单(Menu)组件,可以...

    ExtJs+4.1.0_API[中文版]

    ExtJs+4.1.0_API[中文版]

    ExtJS 4.1 中文版API帮助文档下载

    ExtJS 4.1 中文版API [脚本娃娃---开源文档翻译组]历时一年多完整翻译。 在此友情扩散下载,非常完整详细! 学习ExtJS必备的帮助文档,而且对其中的API进行了汉化,更有利于ExtJS的学习!

    extjs4 最新中文API

    最新的extjs4 中文api,学习者的好帮手。

    extjs4的中文api

    extjs4的中文api,已汉化80%,打开速度快,方便

    extJS myeclipse源码示例

    extJS myeclipse源码示例

    ExtJs 4.1 中文版api

    Extjs 4.1中文版api,非常难得的一款4.1的中文api,值得大家收藏

    ExtJS-6.2.0离线API文档

    ExtJS-6.2.0官方离线API文档

Global site tag (gtag.js) - Google Analytics