1. #1
    Sencha User srkngrt's Avatar
    Join Date
    Oct 2011
    Location
    Herk-de-Stad, Belgium
    Posts
    6
    Vote Rating
    0
    srkngrt is on a distinguished road

      0  

    Default Answered: Confused where to put "beforeDestroy" method of "beforedestroy" event.

    Answered: Confused where to put "beforeDestroy" method of "beforedestroy" event.


    Hello community,

    I'm trying to explore the example Desktop. I wanted to add a msg box to ask the user if they are sure to close for example the window notepad or not. My first idea was to add the code in the notepad.js

    I've put it between layout and items:

    Code:
    ...
    // IE has a bug where it will keep the iframe's background visible when the window
    // is set to visibility:hidden. Hiding the window via position offsets instead gets
     // around this bug.
     hideMode: 'offsets',
     layout: 'fit',
     beforeDestroy: function() {
           alert('Hehe');
     },
     items: [{
           xtype: 'htmleditor',
           id: 'notepad-editor',
          value: [...
    When I close the Notepad window in the desktop it will close and after it is closed my alert popup is shown. I get the same result when I work with adding listeners.

    Then I tried to move this to the /js/Desktop.js file where the window creation is coded. But also here my alert will show after the notepad window is already closed. I've added the code in the first win.on() right under the beforeshow rule.

    Can someone point me the correct way here please? I found several post on this issue, but I think this desktop example is probably an other case than the single examples in the other posts? I assume that making an autosave function while closing the window will have the same problem and seems to me as I didn't get the clue yet where to put things...
    -= Small & Home Office Manager =-
    http://www.soho-manager.com/

  2. Like I said, use beforeclose. beforedestroy is too late. Didn't want to do it for you but here you go:

    Code:
        var beforeclose = function(w) {
            Ext.Msg.confirm('Confirmation', 'Are you sure you want to close without saving?', function(btn) {
                if (btn === 'yes') {
                    w.close();
                } else {
                    w.on('beforeclose', beforeclose, w, { single : true });
                }
            });
    
            return false;
        };
    
        var win = Ext.create('Ext.window.Window', {
            title  : 'Test',
            width  : 400,
            height : 400,
            html   : 'Close Me',
            listeners : {
                beforeclose : {
                    single : true,
                    fn     : beforeclose
                }
            }
        });
    
        win.show();

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Answers
    3517
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Are you sure you don't want to use 'beforeclose' event to stop the closing of the Window?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User srkngrt's Avatar
    Join Date
    Oct 2011
    Location
    Herk-de-Stad, Belgium
    Posts
    6
    Vote Rating
    0
    srkngrt is on a distinguished road

      0  

    Default


    I also tried that event trigger, but I get the same result, window first closes and afterwards the function is fired. It feels like I'm placing the trigger in a wrong place...
    -= Small & Home Office Manager =-
    http://www.soho-manager.com/

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Answers
    3517
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You have to return false because things will be async. Then when your user chooses yes, close the window. You should make your beforeclose event listener fire only once by using the single listener config. That way when you close the window the second time, the listener won't be fired.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User srkngrt's Avatar
    Join Date
    Oct 2011
    Location
    Herk-de-Stad, Belgium
    Posts
    6
    Vote Rating
    0
    srkngrt is on a distinguished road

      0  

    Default


    Ok, I changed it to a single listener after the win.show(); I think you meant this:

    Code:
    win.show();
    win.addListener('beforedestroy', function(){
              Ext.MessageBox.confirm('Notepad Closing', 'Are you sure', this.onSavenotepad)
    });
    When I hit the close icon, window closes immediately and then the message box is showing.
    When I answer with cancel the window is closed, it doesn't appear back or so.

    So, visual there is no change in that, however I thank you pointing out this feature
    -= Small & Home Office Manager =-
    http://www.soho-manager.com/

  7. #6
    Sencha User srkngrt's Avatar
    Join Date
    Oct 2011
    Location
    Herk-de-Stad, Belgium
    Posts
    6
    Vote Rating
    0
    srkngrt is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    That way when you close the window the second time, the listener won't be fired.
    Closing a window the second time ? Not sure what you mean by that Mitchell, is it simply open window, close window, re-open window and close it the second time ? Sorry if this sounds silly...
    -= Small & Home Office Manager =-
    http://www.soho-manager.com/

  8. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Answers
    3517
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Like I said, use beforeclose. beforedestroy is too late. Didn't want to do it for you but here you go:

    Code:
        var beforeclose = function(w) {
            Ext.Msg.confirm('Confirmation', 'Are you sure you want to close without saving?', function(btn) {
                if (btn === 'yes') {
                    w.close();
                } else {
                    w.on('beforeclose', beforeclose, w, { single : true });
                }
            });
    
            return false;
        };
    
        var win = Ext.create('Ext.window.Window', {
            title  : 'Test',
            width  : 400,
            height : 400,
            html   : 'Close Me',
            listeners : {
                beforeclose : {
                    single : true,
                    fn     : beforeclose
                }
            }
        });
    
        win.show();
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  9. #8
    Sencha User srkngrt's Avatar
    Join Date
    Oct 2011
    Location
    Herk-de-Stad, Belgium
    Posts
    6
    Vote Rating
    0
    srkngrt is on a distinguished road

      0  

    Default


    Ok Mitchell, thnx, this rises other questions but I have enough to learn from this example. I'll come back once I've figured it out :-) Now I'm having errors which give me something to look after...
    -= Small & Home Office Manager =-
    http://www.soho-manager.com/

  10. #9
    Sencha User srkngrt's Avatar
    Join Date
    Oct 2011
    Location
    Herk-de-Stad, Belgium
    Posts
    6
    Vote Rating
    0
    srkngrt is on a distinguished road

      0  

    Default


    Ok, couldn't goto bed before trying, have it working in the desktop example. Thnx again for the help !!!

    Code:
        createWindow : function(){
            var desktop = this.app.getDesktop();
            var win = desktop.getWindow('notepad');
            if(!win){
                win = desktop.createWindow({
                    id: 'notepad',
                    title:'<?php echo lang('general_notepad'); ?>',
                    width:600,
                    height:400,
                    iconCls: 'notepad',
                    animCollapse:false,
                    border: false,
                    //defaultFocus: 'notepad-editor', EXTJSIV-1300
    
    
                    // IE has a bug where it will keep the iframe's background visible when the window
                    // is set to visibility:hidden. Hiding the window via position offsets instead gets
                    // around this bug.
                    hideMode: 'offsets',
    
    
                    layout: 'fit',
                    items: [
                        {
                            xtype: 'htmleditor',
                            id: 'notepad-editor',
                            value: ['Give it a try!'].join('')
                        }
                    ],
                    listeners : {
                        beforeclose : {
                            single : true,
                            fn     : this.onsavenotepad
                        }
                    }
                });
            }
            win.show();
            return win;
        },
        onsavenotepad: function (w) {
            Ext.MessageBox.confirm('<?php echo lang('general_closing'); ?>'+' '+'<?php echo lang('general_notepad'); ?>', '<?php echo lang('general_areyousure'); ?>', function(btn) {
                if (btn == 'yes') {
                    w.close();
                    //window.location.href = "/logout";
                } else {
                    w.on('beforeclose', this.onsavenotepad, w, { single : true });
                    Ext.messenger.msg('<?php echo lang('general_opcancelled'); ?>', '<?php echo lang('general_cancelnotepad'); ?>');
                }
            });
            return false;
        }
    -= Small & Home Office Manager =-
    http://www.soho-manager.com/

Thread Participants: 1