ExtJS 4.1 stop grid.Panel from closing - extjs

Question

I have I view that extends Ext.grid.Panel and I want to be able to ask the user if he really wants to close the panel after he clicks [X]. I tried with
listeners: {
beforedestroy: function() {
//console.log('In');
return false;
}
},
but obviously it's not that simple. Any ideas on how to prevent the closing of the panel?
Thanks
Leron
P.S.
This is what I get from sencha forums, haven't test it yet:
Ext.create( 'Ext.window.Window', {
title: 'test',
width: 200,
height: 200,
listeners: {
beforeclose: function( window ) {
Ext.Msg.confirm( 'Hey', 'Are you sure you want to close?', function( answer ) {
if( answer == "yes" ) {
window.destroy();
}
} );
return false;
}
}
} ).show();

Answer 1

beforeclose event should work. No?
Update:
If you want to have some user interaction (i.e. confirmation question or saving data or something like that) it will be a bit tricky...
First, in the constructor of the view do something like this:
this.on('beforeclose', function() {
return this.myCloseHandler(function() { this.close(); }, this);
});
this.alreadyAsked = false;
Than create handler:
myCloseHandler: function(callback, scope) {
if (this.alreadyAsked === false) {
this.alreadyAsked = true;
Ext.MessageBox.show({
msg: 'Are you sure?',
fn: function(btn) {
if (btn == 'yes')
Ext.callback(callback, scope);
else
this.alreadyAsked = false;
}
});
return false;
}
return true;
}
Idea is - you return false immediately but have some flag and condition to go through the same logic without confirmation.

Answer 2

The technique I use is simply to do a window hide rather than the default destroy of the window and add a beforehide event listener. This prevents that all the components in your window that you want to prevent to destroy, are destroyed anyway. The hide event is a quite innocent event to this with. Then the Ext.msg comes, maybe even only on a certain condition. And your response on the break message finished the job. Otherwise no harm done, because false is returned.
var win = Ext.create('Ext.window.Window', {
.... your window specs ...
closeAction : 'hide',
buttons : [{
text : 'Close',
scope : me,
handler : function() {
win.hide(); // not destroy !!! that comes later !!!
}
}],
listeners : {
scope : me,
'beforehide' : function(window) {
if (some_condition == true) {
Ext.Msg.confirm( 'Confirm close of window', 'You really wanna close this window ?', function( answer ) {
if( answer == "yes" ) {
window.destroy();
}
});
return false;
}
},
'destroy' : function(window) {
// do something after the window destruction //
alert('Another window smashed');
}
}
... rest of your window specs
});

Answer 3

Maybe there is no need in heavy constructions. The following works perfect for me:
beforeclose: function(window) {
Ext.Msg.confirm("Hey", "Are you sure you want to close?", function(answer) {
if (answer == "yes") {
window.events.beforeclose.clearListeners();
window.close();
}
});
return false;
}