Extjs : Confirmation message to save changes before closing a window - extjs

Question

I have a editable window. When the user tries to close the window, I need to check if any changes are made in the window. If there are no changes, the window should close. If there any changes I need to prompt the user if the changes needs to be saved. If the user says yes, the changes will be saved and window closes else the window closes without the changes. For this I wrote my code in the controller layer of my code. When the user clicks on the close button in the window, everything is working fine as expected. But the problem comes only when the user tries to close the window by clicking the default [X] in the upper right corner of the window. I am trying to call my method when user clicks on this but due to the async nature of extjs the window closes initially and then the method gets called. I tried using the beforeclose event but of no use.
Here is my piece of code in the view layer.
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
xtype: 'myDetail',
itemId: 'myDetail',
requires: [
'ABC.controller.myDetail.myDetailController'
],
cls:'windowPopup myDetail',
title : 'ABC Detail',
layout: 'fit',
minimizable: true,
maximizable: true,
width: 1000,
height: 650,
constrain: true,
controller: null,
initComponent: function() {
this.items = [
---------------------
]
this.setTitle('ABC Detail - ' + this.config.myDetail.referenceNum);
var userNotification = '';
var bodyStyle = 'color: #000000;'
this.dockedItems = [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
items: [
{
xtype: 'panel',
html: userNotification,
bodyStyle: bodyStyle
}, '->',
{
iconCls: 'icon-save',
cls:'blackButton',
itemId: 'updateAndClose',
text: 'Update & Close',
action: 'updateClose'
},{
iconCls: 'icon-reset',
cls:'blackButton',
text: 'Update',
action: 'update',
itemId: 'update'
},{
iconCls: 'icon-reset',
cls:'blackButton',
itemId: 'composeEmail',
text: 'Compose Email',
action: 'composeEmail'
},{
iconCls: 'icon-reset',
cls:'blackButton',
text: 'Refresh',
action: 'refresh',
itemId: 'refresh'
},{
iconCls: 'icon-reset',
text: 'Close',
cls:'blackButton',
scope: this,
itemId: 'closeBtn'
}
]
}];
this.callParent(arguments);
this.controller = Ext.create(XYZ.controller.mydetail.myDetailController', {view:this, identifier:this.identifier});
}
});
I am handling the buttons in the contoller layer, so if a user clicks on the close button then the contoller will check if any changes are made and then acts accordingly.
In the contoller, I am using the
this.on('closeBtn', 'click', this.confirmSaveBeforeClose, this);
this.on(null, 'close', this.confirmSaveBeforeClose, this);
Here the colseBtn event works fine but the problem comes only with the default windows close option.
Can someone give me an idea of how I can point to the method in the contoller when the user clicks on the [x] button as well.
Thanks..

Answer 1

Listen to the beforeclose event on the window and return false; to cancel it. Store some variable that you've already prevented the close, so the next time you hit it, clear the parameter. Something like:
listeners: {
beforeclose: function(w) {
if (!w.pendingClose) {
w.pendingClose = true;
Ext.Msg.confirm('Foo', 'Bar', function(btn) {
if (btn === 'yes') {
w.close();
} else {
delete w.pendingClose;
}
});
return false;
}
delete window.pendingClose;
}
}