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.