Learn from Saki

Knowledge is power

This content is for registered users only. Please login.
Hello! To access your account, please Log in. Not a member? Sign up
  • Videos
  • Blog
  • Examples
  • Services
  • Add-ons
  • About

How to confirm Ext window close

September 17, 2014 by saki 3 Comments

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:
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
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
  • Author
  • Recent Posts
Follow me:
saki
I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.
Follow me:
Latest posts by saki (see all)
  • Ext, Angular, React, and Vue - June 27, 2019
  • The Site Resurgence - February 11, 2018
  • Configuring ViewModel Hierarchy - June 19, 2015

Filed Under: ExtJS, Howtos, Know-how

Comments

  1. Tomas R says

    September 23, 2014 at 11:01 am

    Why not just call win.destroy() when the user confirms closing the window?

    Log in to Reply
    • Michal Charvat says

      September 25, 2014 at 11:09 am

      When you call destroy, the object with window, all descendant components will be destroyed too and window is removed from the DOM. However you have option select what do you want to do with window – I use mostly hide action instead of destroy. Check ExtJS doc: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.panel.Panel-cfg-closeAction
      In Saki’s example the window will be destroyed because defautl close action is ‘destroy’

      Log in to Reply
    • Saki says

      October 1, 2014 at 11:36 pm

      Yes, exactly! Thanks Michal.

      Log in to Reply

We will be happy to hear back from you Cancel reply

You must be logged in to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Categories

  • Addons (2)
  • Architecture (14)
  • Examples (2)
  • ExtJS (26)
  • Howtos (16)
  • Javascript (1)
  • Know-how (32)
  • Linux (1)
  • Mac OS X (2)
  • SASS/CSS (2)
  • Snippets (9)
  • Theory (14)
  • Touch (6)
  • Tutorials (5)
  • What is a … (9)

Tag cloud

abstract class accordion application button class cluster column component config css definition deprecated design education event example extension extjs factory function form grid html initComponent items javascript Know-how knowledge layout Linux listener mysql old panel pattern php plugin render snippet sql sqlite state table touch tree viewpoint

Membership

Become a Member
Affiliate Program

Support

FAQ
Contact

Legal

Terms and Conditions
Licensing
Privacy Policy

Copyright © 2021 · Dynamik-Gen on Genesis Framework · WordPress · Log in