TabPanel事件

时间:2012-09-06 10:57:11

标签: javascript jquery extjs

我正在使用带有一些TabPanel和一些选项卡的Ext Js web,我想在每个选项卡上使用一些不同的JQuery,问题是如果我附加一些JQuery事件,它会附加到所有选项卡,因为它们在同一个HTML中,因此我想在打开一个选项卡之前取消绑定所有JQuery事件,并且还要绑定我想要的那些事件,让事件在打开相应的选项卡时进行监听。

为了测试事件,我将以下监听器附加到我的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");
        }   
  }

所以我期待很多弹出窗口,但唯一显示的是#34; beforetabchange"它只在我第一次打开一个标签时执行...所以有些东西我没有得到,例如:应该显示"激活"每次打开标签时弹出?我一直在期待。

1 个答案:

答案 0 :(得分:2)

我无法理解你想做什么,但我有以下代码,可能会帮助你。

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();
                 }
            }
       }

}]