javascript - 在 Ext JS 中将点击事件绑定(bind)到 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
        ]
  })

现在我的大问题是，我需要能够将事件绑定(bind)到实际的选项卡。我知道能够将事件绑定(bind)到选项卡面板和选项卡栏，但我需要实际将单击事件绑定(bind)到面板中的选项卡之一。我尝试了类似的方法:

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

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

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

为了明确起见，我并不是试图 Hook 选项卡更改。我试图 Hook 单击选项卡的实际单击事件，因为我将检查是否单击了鼠标中键，以便我可以关闭选项卡(如果是)。

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