Ext.Msg.Confirm - wait for a user response?

Question

I understand that Ext.Msg.Confirm is asynchronous, and will proceed if you do not provide a callback.

Below is my code - this is called if the user tries to navigate from the current screen while in edit mode. I'm passing in a callback to the method - fn is my callback event, but regardless of how I code this the logic continues to navigate away from the page. Is there anyway to stop propagation until the user has selected yes or no in the confirmation box?

Here is the code for the Confirmation:

 displaySaveConfirmation: function(fn) {
    var title = 'Do you want to Save?'
    var msg = 'You are currently Editing Standard Text.  Would you like to save your changes?'
    var box = Ext.Msg.confirm(title, msg, function(buttonId, value) {
        if (buttonId === 'no'){
            fn.call();
        } else {
            return false;
        }
        }, this );

    box.setZIndex(400);
    box.setCls('alert-box');

    var buttons = Ext.ComponentQuery.query('button', box);
    for (var i=0; i<buttons.length; i++) {
        if (buttons[i].getItemId()=="no")
            buttons[i].addCls('blackBtn');
        else if (buttons[i].getItemId()=="yes")
            buttons[i].addCls('blueBtn');

        this.addReleaseEvent(box, buttons[i]);
    }
},

Answer 1

As of now you do the following:

• The event is fired
• You open the MessageBox
• Your function returns, and it does not return "false".
• The browser navigates away before the user can click "yes" or "no".

What you want to do is the following:

• The event is fired
• You open the MessageBox
• Your function returns false.
• The browser does not navigate away.
• The user clicks "yes" or "no".
• If the answer is "yes", you navigate to the previously requested target page manually (e.g. close the browser window, use history.back() or similar).

Alternatively, if the work to get that up and running (and tested, with all the possible cases how to navigate away and how to find the target) is too much, you can opt for the window.alert dialog instead, which does not look nearly as nice, but works synchronously.

Or you can do as I did: I just returned false after bringing up a MessageBox that says: "You cannot leave the page during edit. Please save or abort the post."