PDA

View Full Version : HELP:How to prevent LayoutDialog from hiding?



violinista
20 Aug 2007, 3:48 AM
Hello 2 all,

I have small problem with my LayoutDialog:



dlgExample = new Ext.LayoutDialog(null, {
autoCreate:true,
modal:true,
collapsible:false,
width:800,
height:600,
title:"ExampleDialog",
shadow:true,
resizable:false,
draggable:false,
center: {
autoScroll:true,
alwaysShowTabs: true,
tabPosition:"top"
}
});
I want to prevent dialog from hiding, with some MessageBox containing:"Are you sure you want to close dialog?". So, I put onBeforeHide event, just for example:



dlgExample.on("beforehide",function(){
Ext.MessageBox.show({
title: 'Information',
msg: "LayoutDialog will now be hidden!",
width:300,
buttons: Ext.MessageBox.OK
});
});

But, when messageBox is displayed, dialog is hidden already! Is there a way to prevent dialog from hiding, or I have to show it again manually?

Thank you.

Animal
20 Aug 2007, 4:33 AM
You can't do it with a MessageBox because they're asynchronous, and you need to return a veto boolean from the handler immediatelty. Try



dlgExample.on("beforehide", function() {
return window.confirm("Hide?");
});

Animal
20 Aug 2007, 4:35 AM
Or you could hijack the hide function using http://extjs.com/deploy/ext/docs/output/Function.html#createInterceptor

violinista
20 Aug 2007, 5:38 AM
I tried a lot, and without results; I'm understanding that interception function have to return false for preventing or true for default action, but this code:



dlgExample.hide=dlgExample.hide.createInterceptor(function(){
Ext.MessageBox.show({
msg: "Would you like to save changes?",
buttons: Ext.MessageBox.YESNOCANCEL,
fn:function(btn){
if (btn=="Yes") return false; else return true;
}
});
//return false;
}, dlgExample)


... is not working. Why? Is that because of messageBox's asynchronous call or what? Thank you for your responds.

Animal
20 Aug 2007, 6:02 AM
You cannot use a return value to decide whether to call it or not because...

MessageBox is async!

Youmust always return false from your interceptor.

You have to explicitly call the original Ext.BasicDialog.prototype.hide method on the dialog in the MessageBox's callback.

Animal
20 Aug 2007, 6:04 AM
You don't actually need an interceptor, just replace the hide method in your instance with a method that shows a MessageBox, and hides the dialog on confirm.

violinista
20 Aug 2007, 10:42 PM
OK, but, sadly, this also don't work:



dlgExample.hide=function(){
Ext.MessageBox.show({
msg: "Would you like to save changes?",
buttons: Ext.MessageBox.YESNOCANCEL,
fn:function(btn){
if (btn=="Yes")
return false;
else
Ext.BasicDialog.prototype.hide;
}
});
}


I don't get this, but I suppose solution is very close. Thanks for helping so far!

violinista
21 Aug 2007, 5:29 AM
One possible workaround for this might be to add closable:false parameter to dialog's config (to prevent "close" button for displaying in top right corner of dialog), and add some:


dlgExample.addKeyListener(27, myDialogExampleHide, dlgAddNewOffer);
dlgExample.addButton('Close', myDialogExampleHide, dlgAddNewOffer);
...but solution with replacing hide method with other custom method sounds more versatile to me. Any help? Thank you.

billeatman
3 Nov 2007, 7:50 PM
After reading the above, this was my solution



// confirmation on dialog hide (This has to be wrong)... but it works
var dlgConfirm = emailDialog.on("beforehide", function(){
if (form_email.isDirty() == true){
Ext.MessageBox.confirm('Confirm', 'You will lose all changes made<br>Close email?',
function(btn){
if (btn == 'yes'){
emailDialog.on("beforehide", function(){return true;});
form_email.reset(); // This needs to be before the next call to hide
emailDialog.hide();
dlgConfirm;
}
}
);
return false;
}
else{
form_email.reset();
return true;
}
});