Extjs: must get confirmation before closing window
I have an Ext.window and I would like to display a confirmation message before the user tries to close the window by either clicking the close button in the window, or the default [x] button at the top, or the Esc key. I have the following code for this purpose.
closeWindow: function(){
Ext.Msg.show({
title: 'Confirm or Cancel',
msg: 'Are you sure you want to close this window?',
buttonText: {ok: 'Yes', cancel: 'No'},
icon: Ext.Msg.WARNING,
scope: this,
width: 400,
fn: function(btn, text){
if (btn == 'ok'){
clearInterval(this.myIntervalTimer);
this.cleanEvents(null, null, this.identifier);
this.view.destroy();
} else {
return;
}
}
});
}
This piece of code works great when I click the close button on the window. But when I hit the default close button [x] or the esc key, due to the asynchronous nature of extjs, the window disappears before a confirmation message appears. When the confirmation message appears, there is no window and it becomes irrelevant. I have also tried using the beforeClose event, but no use.
Any suggestions or ideas on how this can be achieved in extjs ?. Thank...
source to share
Check the following please, it works for me:
Ext.create('Ext.window.Window', {
title:'Test'
,width:400
,height:300
,autoShow:true
,listeners:{
beforeclose:function(win) {
if(win.closeMe) {
win.closeMe = false;
return true;
}
Ext.Msg.show({
title:'Close confirmation'
,msg:'Really close?'
,buttons:Ext.Msg.YESNO
,callback:function(btn) {
if('yes' === btn) {
win.closeMe = true;
win.close();
}
}
})
return false;
}
}
});
source to share