It may sometimes be needed to ask the user if he really wants to close an Ext window. Naturally, we would use Message Box for this purpose, and we would listen to beforeclose returning false if the user does not want to close, answers “No.” And now comes the problem: Message Box is, unlike browser alert dialog, asynchronous. The execution of code does not stop when it is displayed but it immediately continues. We do not have time to evaluate the user response before returning false from the beforeclose event to cancel the close. Fortunately, solution is easy:

// vim: sw=4:ts=4:nu:nospell:fdc=4
/*global Ext:true */
/*jslint browser: true, devel:true, sloppy: true, white: true, plusplus: true */

/*
 This file is part of Single File ExtJS 5 Application Example

 Copyright (c) 2014, Jozef Sakalos, Saki

 Package:  Confirm Window Close
 Author:   Jozef Sakalos, Saki
 Contact:  https://learnfromsaki.com/contact
 Date:     24. June 2014

 Commercial License
 Developer, or the specified number of developers, may use this file in any number
 of projects during the license period in accordance with the license purchased.

 Uses other than including the file in a project are prohibited.
 See https://learnfromsaki.com/licensing for details.
 */

/**
 * # How to confirm window close
 */

// Ext.app.Application is not contained in ext.js
// so we need to load it synchronously
Ext.syncRequire([
    'Ext.app.Application'
]);

// Instantiate application
Ext.application({
     name:'MyApp'
    ,requires:[
         'Ext.window.MessageBox'
    ] // eo requires

    // application entry point
    ,launch:function() {
        Ext.create('Ext.window.Window', {
             title:'Test'
            ,width:400
            ,height:300
            ,autoShow:true
            ,listeners:{
                beforeclose:function(win) {
                    // user has already answered yes
                    if(win.closeMe) {
                        win.closeMe = false;
                        return true;
                    }

                    // ask user if really close
                    Ext.Msg.show({
                         title:'Close confirmation'
                        ,msg:'Really close?'
                        ,buttons:Ext.Msg.YESNO
                        ,callback:function(btn) {
                            if('yes' === btn) {

                                // save the user answer
                                win.closeMe = true;

                                // call close once again
                                win.close();
                            }
                        }
                    });

                    // Always cancel closing if we get here
                    return false;
                }
            }
        });
    } // eo function launch
});

// eof