作者liaosankai (低温烘焙)
看板Ajax
标题Re: [问题] ExtJS 的 panel 如何监听 click
时间Mon Aug 9 07:00:41 2010
※ 引述《visa9527 (高级伴读士官长)》之铭言：
: 大家好
: 请问在 ExtJS 当中
: 使用了 var ABC = New Ext.Panel 後
: 这个 ABC 想要做到
: listeners: {'click':function(){alert("HELLO");}}
: 必需如何做才能让这一块 panel 被点击的时候触发事件 ?
: 因为我试过加在 Toolbar 里或 Button 里这一行都可以做到的
: 但是想要点击整个 panel 的情况下它完全没有反应
: 是否 panel 不支援 click 事件 ?
在观念上的分享：
所谓的listener(顷听者/器)指的是函式本身，当某件事件发生时，函式希望物件能通知
并且呼叫(执行)它，但函式并不是对任何事件都感兴趣，所以会向物件登记有兴趣的事
件名称。
var myPanel = new Ext.Panel({
title: 'The Clickable Panel',
width: 200,
height: 200,
listeners: {
render : function(p){ // p参数指的是会将myPanel本身当成参数带进去
p.getEl().on('click', function(){
alert('Panel click!');
});
}
}
});
以上面的程式码来说，我们有些动作希望在Panel物件=>p被render後能够执行，所以
我们向p的listeners清单中登记了'render'这个事件名称，并将函式给p以便它能呼叫。
而当p执行了render()的方法，而render方法里其实有呼叫fireEvent('render')给所有
对'render'有兴趣的listener，并呼叫他们的当时注册的函式。
你会想说那原本的方法不就是针对'click'要它做指定的函式吗？这样的写法错吗？
原因是在於click是由谁发出？一般自订的事件名称都必须由物件手动发出事件，也就是
要自己决定甚麽时候要呼叫fireEvent(eventName)，当然你可以自已发送click事件给所
有listeners，但这并非我们要的结果，所以click事件应该由能真正接收到滑鼠click事
件的网页元素HTML Element来执行。
Panel的预设是由一个Div元素所包覆，所以此Div也是整个Panel接受标准HTML事件的接收
物件，透过getEl()方法就可以取的Panel的Div Element
你也可以用这样：
myPanel.getEl().on('click', function(){
alert('Panel click!');
});
--
欢迎来我的网志看看
@
http://liaosankai.pixnet.net/blog
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 59.105.48.30
1F：推 adahsu:哇！这就是 ExtJS API 文件中 panel 使用 getEl 的范例啊! 08/09 09:19
2F：推 visa9527:感谢 ~ 这就来去试试 08/09 09:29
3F：→ liaosankai:程式码的确就是API中getEl的范例，但我并不觉得单纯贴 08/09 17:14
4F：→ liaosankai:出程式码对在观念上会有什麽帮助 08/09 17:18
5F：推 adahsu:我倒觉得详细说明後用文件上的范例做结尾更容易记住耶！ 08/10 08:59
6F：→ liaosankai:...我的范例好像就是文件中的范例，所以你的重点是? 08/10 19:50
7F：推 howardwang:有学有推 08/10 20:28