In a blog post I ran across recently, someone was trying to intercept the closure of a window via the “X” icon in the top right corner. The idea was to be able to run additional processing before closing the window (such as confirming save/cancel of data, resetting a form, updating a record, or whatever else).

Turns out this is pretty simple to accomplish, but it’s good to understand what’s going on behind the scenes before implementing the solution.

The “Close” Tool

When you specify that your Window (a glorified extension of Panel) is “closable” (the default behavior, btw), here’s what happens in the background:

initTools: function() {
    var me = this;
    me.tools = me.tools || [];
    ......
    // Add subclass-specific tools.
    me.addTools();
    // Make Panel closable.
    if (me.closable) {
        me.addClsWithUI('closable');
        me.addTool({
            type: 'close',
            handler: Ext.Function.bind(me.close, this, [])
        });
    }
    // Append collapse tool if needed.
    if (me.collapseTool && !me.collapseFirst) {
        me.tools.push(me.collapseTool);
    }
}

As you can see, if the Window is closable, a tool of “close” type is added automatically, and fires the panel’s “close” method when clicked. Here’s what close() looks like:

close: function() {
    if (this.fireEvent('beforeclose', this) !== false) {
        this.doClose();
    }
}

The important thing to note here is that the “beforeclose” More >