How to make confirmation of close work

[NBRed5]

I have been building an ext application with a document tree in the west region which loads the document for edtitng in the centre region in a new panle on dblclick.

I have a event handler on the center regions 'beforeremove' event in which I check whether the document has been changed. If the document is dirty I want to use a confirmation dialog to determine whether to set the events cancel event object to true or false i.e. e.cancel = true or false.

the following code is not working (example currently uses an alert rather than confirmation) as the beforeremove event ends before the button on the alert has been pressed and control flows to the alerts callback, this results in e.cancel being set at it's default of false and the panel being removed before the result of the dialog is known, whereas I wish to set the value of e.cancel in the callback of the alert dialog.

Can anybody help, basically I amtrying to implement, 'Are you sure you want to close that as you have achnged it and not saved' functionality.

Example Code:

layout.getRegion('center').on('beforeremove', function(region,panel,e){
if (panel.code.isDirty()){
Ext.Msg.alert('Not Saved','File: ' + panel.title + ' has been changed', function(){
e.cancel = true;
});
}
});

[fay]

Ext.Msg.alert is asynchronous so I fear you have to use the old-fashioned window.confirm (http://extjs.com/forum/showthread.php?p=52388#post52388).

[devnull]

one other possibility is to check a "confirm" status var in the event handler; if its not set then display the alert and cancel the event. if it is set, allow the event to continue.
the alert function would then set the status var as appropriate and refire whatever event or action was called for initially.

[Animal]

You can do it with a MessageBox. Always return false from the beforeremove handler.

Use a callback. In the callback, if they selected "YES", then remove the beforeremove handler, and call the remove function again, and it will go.

[Animal]

Try



var confirmRemove = function confirmRemove(region, panel, e){
if (panel.code.isDirty()){
Ext.Msg.confirm('Not Saved','File: ' + panel.title + ' has been changed', function(btn){
if (btn=="yes") {
region.un('beforeremove', confirmRemove);
region.remove(panel);
}
});
return false;
}
});
layout.getRegion('center').on('beforeremove', confirmRemove);

[NBRed5]

Animal,

Thanks for the help, you have pointed me in the right direction.

I had to amend the code you posted as shown below to set e.cancel = true instead of returnin false as returning either true or false seemed to make no diffrence and the panel was always removed.

I have also had to readd the eventhandler for 'beforeremove' after removing the panle as I could have multiple content panels in the center region each of which I need to process the 'beforeremove' event.

Example Code:


var confirmRemove = function confirmRemove(region, panel, e){
if (panel.code.isDirty()){
Ext.Msg.confirm('Not Saved','File: ' + panel.title + ' has been changed<br />Are you sure you want to close', function(btn){
if (btn=="yes") {
region.un('beforeremove', confirmRemove);
region.remove(panel);
region.on('beforeremove', confirmRemove);
}
});
e.cancel = true;
}
};