View Full Version : Prevent panel from closing when [X] is clicked

22 May 2012, 10:09 AM
I have panel where I render some data from database, it looks like this:

Ext.define('MY.view.CForm', {
extend: 'Ext.form.Panel',

constructor: function(config) {
return this.callParent(arguments);

initComponent: function(){

id: 'form',
resizable: true,
autoScroll: true,
this is jut the begining, I'm not sure if I have to write the whole code since I want an exact functionality which is - when an user click the [X] icon to stop the action from executing and instead to show maybe a confirmation box asking if the user is certain to close the panel or want to keep it. I went through the documentation and I reach to the conclusion that this can be done using:

listeners: {
beforedestroy: function() {
and here is the part that I simply don't understand. I read that I have to fire an event and retrurn false in order to accomplish what I need but I don't know how to do it in practice. Could anyone help me with any real life example on how to perform such kind of operation or explanation how to construct my event inside the beforedestroy listener, and how exactly to use this event so that I can stop my panel from closing.


Tim Toady
22 May 2012, 10:37 AM
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" ) {
} );
return false;
} ).show();

22 May 2012, 10:49 AM
That was fast, thanks for the response. But will this gonna work for Ext.form.Panel? I saw something similiar and I think that I cant use "window" as a parameter in beforeclose: function( window ) in my case, but maybe I have mistake somewhere..

Tim Toady
22 May 2012, 11:18 AM
Sorry. I didn't read it closely enough to notice it was a panel you were closing. It should work the same, though I have never tried it. As far as the window parameter is concerned, the name is arbitrary. Just change it to something that makes more sense. The component that the event is fired on is passed as the first param.