extjs 6.5.2 modern - beforeremove, beforeclose, close not firing

Viewed 1193

I've noticed that tabpanel's beforeremove and panel's beforeclose and close are not firing. On the other hand destroy event is working fine. Are there any workarounds or different events with the same results?

I've reproduced my observation at the example below.

Ext.application({
name : 'Fiddle',

launch : function() {
    Ext.create('Ext.TabPanel', {
    fullscreen: true,
    tabBarPosition: 'bottom',

    items: [
        {
            xtype: 'panel',
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen',
            closable: true,
            listeners: {
                beforeclose: function () {
                    console.log('beforeclose');
                },
                close: function () {
                    console.log('close');
                },
                destroy: function () {
                    console.log('destroy');
                }
            }
        },
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }
    ],
    listeners: {
        beforeremove: function () {
            console.log('beforeremove');
        }
    }
});
}
});

Just add the example to sencha fiddle in Modern toolkit and open your browser's developer tools.

Also, beforeclose and close are firing fine if the panel is not inside a tabpanel.

Ext.create({
xtype: 'panel',
title: 'Panel Title',
iconCls: 'x-fa fa-html5',
height: 400,
width: 400,
bodyPadding: 12,
html: 'Sample HTML text',
renderTo: Ext.getBody(),
listeners: {
    beforeclose: function () {
        console.log('beforeclose');
    },
    close: function () {
        console.log('close');
    }
}
}).close();

UPDATES

-- It's a framework bug. So probably i'll have to wait for an update.

-- I accepted Marco's answer because it solves my issue. But it's a framework bug that it should be fixed in the next update.

1 Answers

Demo here: https://fiddle.sencha.com/#view/editor&fiddle/29dj

TL;DR listen to "deactivate" and "removed" events.

The user click happens on tab's bar (Ext.tab.Bar) and not on your panel, and the bar is part of Ext.tab.Panel (which extends Ext.Container). Therefore the method called to close your tab is "onItemRemove" of Ext.tab.Panel, and not "close" of Ext.Panel. This is the reason why your listeners don't work.

With the demo fiddle you can see all the events being fired by your Ext.Panel and use those events to do what you need.

EDIT

To show a confirmation message before closing here's the fiddle: https://fiddle.sencha.com/#view/editor&fiddle/29hl

Related