在 Ext JS 中将点击事件绑定到 Tab

Question

再次问好，SO。

我正忙于一个几乎全部使用 ExtJS 进行前端工作的项目。我使用的是 4.0.0 版本，假设这是有必要了解的。我有一些代码如下：

panel = Ext.create("Ext.panel.Panel",{
        //initializing stuffs
})

其中一些现在

 tabs = Ext.create("Ext.tab.Panel", {
        //initialize config
        items: [
               //the panels
        ]
  })

我的大问题是，我需要能够将事件绑定到实际的选项卡。我知道能够将事件绑定到选项卡面板和选项卡栏，但我需要实际将单击事件绑定到面板中的选项卡之一。我尝试了类似的操作：

panel = Ext.create("Ext.panel.Panel", {
        //initializing stuffs
        listeners: {
                 click: {
                        fn: function() {
                            console.log("in click listener for panel")
                        }
                  }
         }
 })

但是，问题是，根据我所知，它绑定到实际面板本身，而不是绑定到选项卡栏中的选项卡。有趣的是，就功能而言，它实际上甚至没有绑定到实际面板，因为我从未看到控制台日志信息。

无论如何，这里有人知道如何将事件直接绑定到选项卡吗？或者甚至如何直接访问选项卡？我一直在筛选 ExtJS API 文档，但我仍然找不到任何东西，所以，如果这里有人能提供帮助，那就太棒了！ ：D

只是为了澄清，我并不是试图挂钩选项卡更改。我试图挂钩单击选项卡的实际单击事件，因为我将检查是否单击了鼠标中键，以便我可以关闭选项卡（如果是）。

Answer 1

我把它放在 ExtJS 3 中选项卡面板内的选项卡上。类似的东西应该可以在 4 中使用。

listeners: {
    activate: function() {
        var me = this;
        Ext.fly(this.ownerCt.getTabEl(this)).on({
            click: function() {
                me.loadProducts();
            }
        });
    },
    single: true
},

loadProducts: function() {
    this.load({
    url: 'products.jsp',
    params: {
        caseID: window.caseID
    },
    scripts: true
});

Answer 2

您可以将侦听器添加到 TabPanel 本身监听 beforetabchange 和/或 tabchange