TabPanel事件

我正在與一些TabPanels和一些選項卡的Ext Js網站，我想在每個選項卡上使用一些不同的JQuery，問題是，如果我附加一些JQuery事件它將附加到所有選項卡，因爲它們在同一個HTML中，因此我想在打開一個選項卡之前解除所有JQuery事件的綁定，並綁定我想要的選項，讓事件在相應選項卡打開時進行偵聽。TabPanel事件

爲了測試活動中，我附加了以下這些聽衆對我的TabPanel：

listeners:{ 
     beforetabchange : function(){ 
      Ext.Msg.alert("beforetabchange"); 
     }, 
     beforeshow : function(){ 
      Ext.Msg.alert("beforeshow"); 
     }, 
     activate : function(){ 
      Ext.Msg.alert("activate"); 
     }, 
     deactivate : function(){ 
      Ext.Msg.alert("deactivate"); 
     } 
    }

所以我期待很多彈出窗口，但只有一個顯示是對應於「beforetabchange」的一個，它是唯一的執行我第一次打開一個標籤...所以有些東西我不明白，例如：每次打開標籤時都應該顯示「激活」彈出窗口？我期待如此。

來源

2012-09-06 Javier

1）爲什麼在世界上你想同時使用ExtJS和jQuery **？ ExtJS足夠了。 2）當你改變選項卡時，** TabPanel **觸發'beforetabchange'事件，並且**個人面板**被更改（不是包含它們的TabPanel！）觸發'activate'和'deactivate'事件，這就說得通了。 –

@Drmitry Jquery提供了比ExtJs更舒適的訪問方式 – reporter

我會討論舒適的訪問方式，但我認爲在這種情況下它是無關緊要的，因爲ExtJS是一個非常重的庫，如果你使用它，你不需要只是因爲你喜歡它而想在其上添加jQuery，這是一個巨大的矯枉過正。 –

我無法理解你想要做什麼，但我有下面的代碼，可能是它的幫助你。

 
items:[{ 
     xtype: 'tabpanel', 
     activeTab: 0, 
     items:[{ 
      title: 'tab1', 
      id:'divtab1', 
      autoHeight: true, 
      items:[{ 
        // your content here 
      }] 
     },{ 
      title: 'tab2', 
      id:'divtab2', 
      autoHeight: true, 
      items:[{ 
        // your content here 
      }] 
     },{ 
      title: 'tab3', 
      id:'divtab3', 
      autoHeight: true, 
      items:[{ 
        // your content here 
      }] 
     }], 
     listeners: { 
      'tabchange': function(tabPanel, tab){ 
       if(tab.id=="divtab1") 
       { 
         function1(); 
       } 
       else if(tab.id=="divtab2") 
       { 
         function2(); 
       } 
       else 
       { 
         function3(); 
       } 
      } 
     } 

}]

來源

2012-09-07 05:55:31

謝謝你的幫助。最後，我所做的就是正確使用'activate'和'deactivate'事件，將這些監聽器添加到爲TabPanel創建的每個Panel中，而不是直接在TabPanel的監聽器列表中，就像我以前所做的那樣。 – Javier

回答

相關問題