ExtJS TabPanel beforeremove beforeclose usage instructions_extjs

The current system uses Extjs as the front-end framework. The system homepage layout adopts the border method, with an accordion-style menu bar on the left and a TabPanel container in the middle area. Click the corresponding menu in the left menu bar to add the corresponding Panel in the middle area. The Panel is embedded in the added gridview. ;

The current problem is that I want to pop up a dialog box to prompt the user when the user closes it. According to the user's choice, whether to destroy the current page (Panel) or hide the current Panel and save temporary data;

View Extjs API documentation, for the added panel to listen for the beforeclose event

the main code is as follows

middle area part:

Copy code The code is as follows:

//centerPanel
centerPanel = new Ext.TabPanel({
id: 'centerPnl'
, region: 'center'
, border: false
, iconCls: 'tabs'
, enableTabScroll: true
, items: [{
title: 'Home'
, autoScroll: true
}]
, defaults: { autoScroll: true }
}); Add a new Panel function addCMUAMS_LogTab() {
activeCMUAMS_LogTab = centerPanel.add({
id: 'CMUAMS_LogShowAll'
, title: 'System log'
, iconCls: 'tabs'
, closable: true
, bodyStyle: 'padding:10px'
, items: CMUAMS_LogGrid
, listeners: { beforeclose:TabCloseConfirm }
})
activeCMUAMS_LogTab.show();
}

But in this case, the situation is as follows:

Panel has been closed before 'beforeclose' Then I went to Google and looked up information, and suddenly I thought that TabePanel, as a container, needs to intercept events first? So the code in the middle area is modified as follows //centerPanel

Copy the code The code is as follows:

centerPanel = new Ext.TabPanel({
id: 'centerPnl'
, region: 'center'
, border: false
, iconCls: 'tabs'
, enableTabScroll: true
, items: [{
title: 'Home'
, autoScroll: true
}]
, defaults: { autoScroll: true }
//First listen to the beforeremove event
, listeners: { beforeremove: function(ct,component ) { return false; } }
});

Run again and check the effect:

To get it done, you must click on Panel When closing the button, the Remove event of the TabPanel container should be executed first, and then the Close event of the Panel itself is executed. The project is in a hurry, so I don’t have much time to delve into it. I don’t know much about JS and Extjs, and I know it from passing. My friend hopes to tell me the real reason.