ExtJS 4: Problems with Message confirmation box on a modal window

Question

I am currently facing a problem which seems to be a very common one for ExtJS or JavaScript users. I am facing a problem due to the Message Confirmation box's Asynchronous nature. I have tried to find the solution on many forums, but none of the solutions haven't given me a simpler way to deal with the below problem. Or may be I failed to understand that hints that were given.

Below is mycode:

var modalWindow = new Ext.Window({
        id: 'modalWindow',
        ...
        ...
        listeners: {
            beforeclose: function ( window, eOpts ){    
                if ( dirtyCheck() ){
                    //perform abc()
                    // and don't close the modal window
                    return false;
                }
                else {
                    //perform xyz()
                    // close the modal window
                    return true;
                }
            },
            close: function ( panel, eOpts ){
                //will trigger beforeclose event to check if all is well
                //refresh screen
            }

        },
        buttons: [{
            text: 'Close',
            handler: function () {
                modalWindow.close() // Same close() method is called when we click on window close ( X symbol ) tool.
            }
        }]        
});

function dirtyCheck(){
    // Code to check if dirty records exist
    if ( /* Found dirty records */ ){
        Ext.MessageBox.confirm('Please Confirm', 'Changes not saved. Do you want to close   the window?', function (btn) {
            if (btn === 'yes') {
                console.log('*** clicked yes ****');
                window.close();
            }
        });
    }
}

Case Description: I have a grid and double clicking on a grid row opens a modal window coded above. I make some modifications on the modal window. If the user either clicks on the 'Close' button or the modal window close tool ( X symbol on top-right corner ) or even ESC button, I should prompt a confirmation messsage. If the user clicks on 'Yes', I should close the modal window else leave it open.

I have learnt that clicking on the X ( close tool ) or the ESC button fires a 'close' event which in turn fires 'beforeclose' and waits for true/false to either destroy the modal window or keep it open.

Problem: When the user clicks on X ( close tol ) or the ESC button, and while I debug, I see the control going to beforeclose and then the dirtyCheck() function that I wrote. The dirtyCheck function also displays a Message Confirmation box, but the control doesn't wait for me to click on Yes/No. It returns to beforeclose in the background and then to close. So, by the time user decides to click on either 'Yes' or 'No', ExtJS has decided what to do with the modal window and hence I am losing control on whether to close the modal window or not.

Could anyone please help me on what to do in such a case?

Answer 1

You might need to use window.destroy() to remove it after confirmation, your beforeClose function can be

beforeclose: function(window, eOpts) {
      Ext.Msg.confirm('Please Confirm', 'Changes not saved. Do you want to close the window?', function(answer) {
          if (answer == "yes") {
              window.destroy();
          }
      });
      return false;
}

Answer 2

Pass the window to your check function and close it once user have made a choice.

var modalWindow = new Ext.Window({
    id: 'modalWindow',
    ...
    ...
    listeners: {
        beforeclose: function ( window, eOpts ){    
            dirtyCheck(window);
            return false;
        },
        close: function ( panel, eOpts ){
            //will trigger beforeclose event to check if all is well
            //refresh screen
        }

    },
    buttons: [{
        text: 'Close',
        handler: function () {
            modalWindow.close() // Same close() method is called when we click on window close ( X symbol ) tool.
        }
    }]        
});

function dirtyCheck(window){
    // Code to check if dirty records exist
    Ext.MessageBox.confirm('Please Confirm', 'Changes not saved. Do you want to close   the window?', function (btn) {
    confirmation = true;
    if (btn === 'yes') {
        console.log('*** clicked yes ****');
        window.close();
    }
    });
}

BTW, you can use your way but then you will need to use native browser dialog, see confirm function http://www.w3schools.com/js/js_popup.asp