Handling window close or hide event in ExtJS 3.2.1

In case you need to do something specific on window close or hide. Here is a way to do so.

var myPopUpWindow = new Ext.Window({
    layout : 'hbox',
    layoutConfig : {
        align : 'stretch',
        pack : 'start',
    },
    width : popUpWindowWidth,
    height : popUpWindowHeight,
    modal : true,
    resizable : true,
    closable : true,
    draggable : true,
    animate : true,
    id : myPopUpWindow,
    shadow : true,
    closeAction : 'hide',
    hideMode : 'visibility',
    title : 'Selection Box Example',
    items : [ my_popUp_grid, my_selections_grid ],
    bbar : new Ext.Toolbar({
        items : [ {
            xtype : 'tbbutton',
            text : 'Cancel',
            handler : function() {
                myPopUpWindow.hide();
            }
        }, {
            xtype : 'tbfill'
        }, {
            xtype : 'tbbutton',
            text : 'Save',
            handler : function() {
                saveData();
                myPopUpWindow.hide();
            }
        } ]
    }),
    listeners:{
         'close':function(win){
                  console.info('bye');
                  saveData();
          },
         'hide':function(win){
                  console.info('just hidden');
                  saveData();
          }
 }
});

In the example above, I'm calling saveDate() on window close and hide.