Execute synchronously MessageBox show function in ExtJs-5

Question

I want to execute a Ext.Msg.show() function synchronously in ExtJs-5

onButtonClick : function() {
1. some code...
2. Ext.Msg.show({
            title : 'Confirm Please',
            msg : 'Please be informed that record will only save when click ok.',
            buttons : Ext.Msg.OKCANCEL,
            icon : Ext.Msg.QUESTION,
            fn : function(btn) {
                    if ('cancel' === btn) {
                        return;
                    }
                }
            });

3. other message box ...
4. other code ...
}

The above function execute synchronously each step 1, 2, 3 & 4 but doesn't wait for user interaction on step 2. It directly move to step 3 and after that to step 4. But I want to execute step 3 only when user click on ok else terminate other below steps.

Can anybody check and let me know the possible code that I need to add to make it possible? Thanks

Answer 1

There is an easier and integrated way to accomplish a confirm window: Ext.Msg.confirm .

Remember that a "confirm" in ExtJs is ASYNCHRONOUS compared to the one of pure javascript. So your step 3/4 should be moved to the btnId==yes condition block:

Below an example:

Ext.Msg.confirm("Confirm", "Are you sure?", function(btnId){
    if(btnId == "yes"){
        // User clicked YES
        // Move here step 3/4
    }
    else {
        // User clicked NO
    }
});

Bonus Tip: nothing stops you from nesting a confirm in a confirm like this:

// Confirm #1
Ext.Msg.confirm("Confirm", "Are you sure?", function(btnId){
    if(btnId == "yes"){
        // User clicked YES

        // Confirm #2
        Ext.Msg.confirm("Confirm", "Are you REAAALLY sure?", function(btnId){
            if(btnId == "yes"){
                // User clicked YES
            }
            else {
               // User clicked NO
            }
        });

    }
    else {
        // User clicked NO
    }
});