PDA

View Full Version : Need a confirmation message before closing the window



varmaj80
16 Sep 2014, 12:22 PM
Hi all,

I have a Ext.window and I would like to display a confirmation message before a user tries to close the window either by clicking the close button in the window or the default [x] button in the top or by 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 fine when I click on the Close button in the window. But when I click the default close[x] or the esc key, due to async nature of extjs the window disappears before the confirmation message gets displayed. When the confirmation message displays there is no window and so it is becoming irrelevant. I tried using the beforeClose event as well but of no use.

Any suggestions or ideas of how this can be achieved in extjs?. Thanks...

AlessandroTorrisi
16 Sep 2014, 12:49 PM
i guess it will be something like this :



Ext.create('Ext.window.Window', {
title: 'Hello',
closeAction : 'destroy'
items: [],
listeners :{
beforedestroy: function() {
//Msgbox : are you sure?
}
}
}).show();

varmaj80
16 Sep 2014, 1:56 PM
I tried this but of no use. I am trying to see how I can override the default window close functionality. Any suggestions please?..

yukiozeki
16 Sep 2014, 5:38 PM
Why don't you define your window class like this.

Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
alias: 'widget.mywindow',

close: function() {
if (this.fireEvent('beforeclose', this) !== false) {
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'){
this.doClose();
}
}
});
}
}
});


If default window(Ext.window.Window) is overridden, it has a bad effect on Ext.window.MessageBox (because Window’s subclass).

varmaj80
17 Sep 2014, 7:58 AM
Thanks Yuki, That worked....