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]);
    }
},

Possible duplicate of [Dialog box runs for 1 sec and disappears?](http://stackoverflow.com/questions/6063522/dialog-box-runs-for-1-sec-and-disappears) — Evan Trimboli, Dec 11 '15 at 01:42
You need to call your code inside if or else condition only. If user say yes do code in if or if say no do code in else part. — Mohit Saxena, Dec 11 '15 at 06:09
As I understand your `fn` handle navigation away from th page and code on rows 14-23 just customize your message box. If so I dont get whats problem here? Your `fn.call()` runs immediatly after confirmation window displayed? — Sergey Novikov, Dec 11 '15 at 08:11

score 1 · Accepted Answer · answered Dec 11 '15 at 14:01

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."

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

1 Answers1