ExtJS, Conditional destroying of a Window

The following tip applies to Sencha ExtJS release 4 (maybe also to 3). It  is showing how you can prevent destroying a Window and include a confirmation request.

It will in the end lead to this result (live sample, not equal to the one in the code).

Sample ExtJS dialog with Window close (destroy) confirmation

Sencha ExtJS, Confirmation before window destroy

ExtJS code with this sample

Explanation of the code

The technique that I use is simply to implement  hide rather than the default destroy on the window. Then I 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 an innocent event to this with. In the beforehide event the Ext.msg is implemented. You can even do this conditionally like in the sample shown here.

The response on the break message finished the job. Otherwise no harm done, because false is returned.

Link: Sencha.Inc, ExtJS JavaScript framework

Please come back, for more Sencha ExtJS tips and tricks…

Johan van de Merwe
Dedicated to professional software development since 1985. Has worked since 1992 as IT manager in several international operating companies. Since 2007 CEO and Sencha Ext JS web application developer at Enovision GmbH.

Leave a Reply