Re: [問題] ExtJS 的 panel 如何監聽 click

看板Ajax作者 (低溫烘焙)時間15年前 (2010/08/09 07:00), 編輯推噓4(403)
留言7則, 4人參與, 最新討論串2/2 (看更多)
※ 引述《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

08/09 09:19, , 1F
哇!這就是 ExtJS API 文件中 panel 使用 getEl 的範例啊!
08/09 09:19, 1F

08/09 09:29, , 2F
感謝 ~ 這就來去試試
08/09 09:29, 2F

08/09 17:14, , 3F
程式碼的確就是API中getEl的範例,但我並不覺得單純貼
08/09 17:14, 3F

08/09 17:18, , 4F
出程式碼對在觀念上會有什麼幫助
08/09 17:18, 4F

08/10 08:59, , 5F
我倒覺得詳細說明後用文件上的範例做結尾更容易記住耶!
08/10 08:59, 5F

08/10 19:50, , 6F
...我的範例好像就是文件中的範例,所以你的重點是?
08/10 19:50, 6F

08/10 20:28, , 7F
有學有推
08/10 20:28, 7F
文章代碼(AID): #1CNpSZvo (Ajax)
討論串 (同標題文章)
文章代碼(AID): #1CNpSZvo (Ajax)