将单击事件绑定到分机 JS 中的选项卡

Binding click events to a Tab in Ext JS

本文关键字：JS 选项 单击 事件 绑定      更新时间：2023-09-26

再次阿罗哈，所以。

我正忙于一个项目，该项目几乎都是前端工作的 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

只是为了清楚起见，我并不是要挂在标签上更改。我正在尝试挂钩到单击选项卡的实际单击事件，因为我将检查它是否是单击的鼠标中键，以便我可以关闭选项卡（如果是）。

我把它放在 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
});
您可以将

侦听器添加到 TabPanel 本身，以侦听beforetabchange和/或tabchange

相关文章：