作者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