extjs 6.5.2 modern - beforeremove, beforeclose, close not firing

Question

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.

Here the issue is panel is assuming closeAction as 'destroy' (which is by default), so only destroy event is getting fired.Need to check the work around. — Tejas, Nov 07 '17 at 11:52
Take a look at [Panel.js](http://docs.sencha.com/extjs/6.5.2/modern/src/Panel.js.html) close function. `close` and `beforeclose` should be fired either way. And they do, if there is no `tabpanel` container. — Zoti, Nov 07 '17 at 12:20
Tell me what are you expecting.Leave this issue, i just want to know what is your basic requirement.According to this I can tell you workaround. — Tejas, Nov 07 '17 at 12:35
Because it's a very basic functionality of closable `panel`s. I guess creating a custom `panel` will be my final solution. — Zoti, Nov 07 '17 at 12:37
What i am trying to achieve is to show an info dialog to the user before the tab close event in order to cancel close (beforeclose -> return false) if the user clicks cancel. — Zoti, Nov 07 '17 at 12:50
You can do similar thing by this approach(workaround): Remove closable config & inside title config give
structure which will look like closable thing.On that div click you can do similar functionality. — Tejas, Nov 07 '17 at 13:01

Marco C. · Accepted Answer · 2017-11-13T10:33:18.810

0

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

edited Nov 13 '17 at 10:33

answered Nov 08 '17 at 12:05

Marco C.

1,282
2
15
19

The thing is that `beforeclose` is fired on Classic framework. I opened a ticket to Sencha and i am waiting for an answer. If nothing comes up from them i'll try to implement your workaround. Thanks for your effort. – Zoti Nov 08 '17 at 13:52
Marco C. `deactivate` is not working in my case because it is also being fired when i select another `tab`. – Zoti Nov 09 '17 at 08:39
Sorry I've been busy, and what about "removed"? What are you trying to do? – Marco C. Nov 10 '17 at 19:30
Show an "Are you sure you want to close the tab?" message in order to cancel `tab` closing if the user didn't want to close it. I think that only `panel`'s `beforeclose` and `tabpanel`'s `beforeremove` will work in my case. – Zoti Nov 13 '17 at 08:38
1

I updated my answer with another fiddle that shows confirmation message, it does not use events but a simple override that does the job. hope it helps! – Marco C. Nov 13 '17 at 10:36

extjs 6.5.2 modern - beforeremove, beforeclose, close not firing

1 Answers1