Question

我设置的听众似乎没有触发。这是我的代码：

  new Ext.TabPanel({
        id:'content-tab-panel',
        renderTo: 'trx_tabs_ext',
        activeTab: 0,
        minTabWidth: 150,
        tabWidth:180,
        enableTabScroll: true,
        autoScroll: true,
        resizeTabs:true,
        defaults: {
            autoScroll:true
        },
        items: [{
            title: 'No Active Chat',
            id: 'no_chat',
            closable: true,
            autoScroll: false,
            margins: '0 0 0 0',
            html: "<div id=\"chat_window_viewer\"  style=\"width:900px;height:440px;text-align:left; \">&nbsp;</div>"
        }],
        width: '100%',
        height: '400px',
        listeners: {
            tabchange: function(tabPanel, newTab, oldTab, index)
            {
                console.log('change tab');
            },
            beforeadd : function (tabpane, component, index) {
                console.log('Adding new tab');
            },
            beforeclose: function(element) {
                console.log('closing');
            }
        }
    });

之前的tabchange触发器通过在控制台上写日志来实现。但是，beforeclose不会。

我也尝试将它放在Tabpanel的项目中，也不起作用。

在TabPanel中添加关闭事件的正确方法是什么？

Answer 1

要获取项目关闭事件，请将侦听器添加到该项目。

在这里小提琴：https://fiddle.sencha.com/#fiddle/59f

Answer 2

您使用的是哪个版本的库？请注意，自2.3.0以来可以使用beforclose事件。

当我为项目而不是整个小组监听事件时，它适用于我

new Ext.TabPanel({
        id:'content-tab-panel',
        renderTo: 'trx_tabs_ext',
        activeTab: 0,
        minTabWidth: 150,
        tabWidth:180,
        enableTabScroll: true,
        autoScroll: true,
        resizeTabs:true,
        defaults: {
            autoScroll:true
        },
        items: [{
            title: 'No Active Chat',
            id: 'no_chat',
            closable: true,
            autoScroll: false,
            margins: '0 0 0 0',
            html: "<div id=\"chat_window_viewer\"  style=\"width:900px;height:440px;text-align:left; \">&nbsp;</div>",
            listeners:{
                'beforeclose': function(){console.log('closed')}
            }
        }],
        width: '100%',
        height: '400px',
        listeners: {
            tabchange: function(tabPanel, newTab, oldTab, index)
            {
                console.log('change tab');
            },
            beforeadd : function (tabpane, component, index) {
                console.log('Adding new tab');
            }
        }
    });

Answer 3

由于 Extjs 2.3.0 ，tabpanel有beforeclose个事件：

beforeremove （this，component，eOpts）

在从容器中删除任何Ext.Component之前触发。处理程序可以返回false以取消   删除。

自：2.3.0起可用

参数


this：Ext.container.Container

组件：Ext.Component   正在删除的组件

eOpts：Object传递的选项对象   到Ext.util.Observable.addListener。

所以只需在tabpanel中添加一个监听器：

listeners: {

    beforeremove: function (panel, item, eOpts) {
        console.log(item); // the tab to be removed
    }
 . . . . 
}

具有可关闭选项卡的ExtJs Tabpanel关闭事件

3 个答案: