2013-02-07 22 views
1

我們使用CFLayout在我們的Web應用程序中創建一個選項卡結構。創造,佈局後,我們調用這個函數:我們如何在cfLayout手風琴中設置onExpand事件

mytabs = ColdFusion.Layout.getTabLayout("#attributes.cflayoutName#"); 
mytabs.on('tabchange', 
    function(tablayout,tab) {   
     var tabtitle = tab.title; 
     alert(tabtitle); // Actual code does various useful 'stuff' here. 
    } 
); 

這段代碼工作得非常好,並警告將在每次用戶點擊選項卡上的時間顯示。

問題是我們現在試圖用CFLayout類型的「手風琴」來做同樣的事情,當用戶切換他們正在查看的手風琴窗格時,我無法觸發事件。我們嘗試將上述內容保留原樣,並將「tabchange」屬性更改爲「展開」,「展開前」,「激活」和「摺疊」。

對於這個測試我使用下面這個簡單的JS功能,避免onchange事件中從JS中出現的問題:

mytabs = ColdFusion.Layout.getAccordionLayout("#attributes.cflayoutName#"); 
mytabs.on('expand', 
    function(tablayout,tab) { 
     console.log('test'); 
    } 
); 

我們沒有收到任何錯誤。根本沒有任何東西記錄到控制檯。我已經嘗試將console.log替換爲警報,以排除該行的任何問題。

回答

1

我發現Ext庫文檔對找到解決此問題的解決方案非常有幫助:here

Ext庫有一個getComponent方法,它允許您引用您嘗試添加展開事件的accordion佈局面板。一旦你有了這個,你可以使用上面使用的「on」方法將擴展事件分配給每個面板。

for (x=1; x<accordionLayoutArray.length; x++) { 
     mytabs.getComponent(accordionPanelName).on('expand', 
      function(tab) { ... }); 
} 
1

這成爲了一個註解,因此將作爲一個答案

一些谷歌搜索,我發現我的想法有一些相關的帖子後太長。看起來好像Ext JS中的手風琴沒有與選項卡相同的事件。相反,您需要添加一個偵聽器才能捕獲擴展。

See this post - 萬一有事這裏頁面的相關部分:

你需要聽子板的手風琴展開事件,你可以這樣做:

代碼:

myAccordion.add(myFunc('myTitle')); 
    function myFunc(title) 
    { 
     return new Ext.Panel(
     { 
      title: title, 
      listeners: { 'expand': {fn: something, scope: foo}} 
     } 
     ); 
    } 

And I also found another similar post here on SO - S ee都回答了

一旦您知道手風琴需要聽衆,您可以在Google上找到許多結果。如How do I attach an event handler to a panel in extJS?

This Google search will give you lots of examples.

希望有所幫助。

+0

要強制您的答案,我對文檔的理解是tabchange事件觸發任何選項卡更改,其中面板展開事件特定於某個面板。 – Travis

+0

謝謝;這非常有幫助。我試圖通讀並且更好地理解這一點,但實際上我遇到的所有例子都展示了在定義手風琴時如何添加監聽器。但是,由於ColdFusion做了定義,我需要在事實之後以編程方式添加偵聽器。你知道我在哪裏可以找到關於如何做到這一點的代碼示例? – Nicholas

+0

不,不幸的是我沒有你的代碼示例。我將首先查看由ColdFusion生成的源代碼。在您選擇的瀏覽器中,使用「查看源代碼」選項。這應該告訴你ColdFusion如何定義手風琴。 –