透析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：

Ext.onReady(function(){
    var win = new Ext.Window({
        title:'响应窗口移动事件的例子',
        width:400,
        height:300,
        html:'<br/><br/><p><center>这是响应窗口移动事件的例子，请注意响应函数中的参数</center></p>'
    });
    win.on("move",moving);
    win.show();
});
moving = function(c,x,y){
    alert("移动窗口的id:" + c.id);
    alert("窗口移动后的x坐标值：" + x);
    alert("窗口移动后的y坐标值" + y);
};

//也可以这样定义：去掉注释，并把上面定义的给注释掉即可
/*
moving = function(c,x){
    alert("移动窗口的id:" + c.id);
    alert("窗口移动后的x坐标值：" + x);
}
*/
//也可以这样定义：去掉注释，并把上面定义的给注释掉即可
/*
moving = function(c){
    alert("移动窗口的id:" + c.id);
}

评论

1 楼 JavaTestJava 2009-05-21  

不错的分析，刚转到自己的博客上去了。