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 |
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.
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
Why not just call win.destroy() when the user confirms closing the window?
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’
Yes, exactly! Thanks Michal.