Ext.window override destroy in child class on close button of window in parent class

Question

I have a ext.window in my code which has the default save and close button. On close button click I am hiding the window:

Ext.define('MyPack.template.TemplateWindow', {
extend : 'Ext.Window',

id: 'templateEditorWindow',
closeAction: 'hide',
autoScroll: false,

createTemplateEditor : function() {
 // some code
},

initComponent : function() {

this.createTemplateEditor();

Ext.applyIf(this, {
    layout      : 'border',
    modal       : true
});

this.items = [ this.templateEditor ];
this.buttons = [
    { text     : '#{msgs.button_save}',
      window   : this,
      handler  : function () {
        if(this.window.templateEditor.save()) {
          this.window.hide();
        }
      }
    },
    { text     : '#{msgs.button_close}',
      cls : 'secondaryBtn',
      window   : this,
      handler  : function( ){
        this.window.hide();
      }
    }
];

this.callParent(arguments);
}, 

});

I have one another window which is extending above window.

Ext.define('MyPack.template.RestfulTemplateWindow', {
    extend : 'MyPack.template.TemplateWindow',

    createTemplateEditor : function() {
      // some code
    }
});

I am creating this child class. The window is created properly. But I want to override handler function of close button. On close it should destroy.

How can I override it?

Answer 1

You can define a closeAction on a window

closeAction : String The action to take when the close header tool is clicked:

destroy : remove the window from the DOM and destroy it and all descendant Components. The window will not be available to be redisplayed via the show method.

hide : hide the window by setting visibility to hidden and applying negative offsets. The window will be available to be redisplayed via the show method. Note: This behavior has changed! setting does affect the close method which will invoke the approriate closeAction.

Defaults to: 'destroy'

So there is no need to override anything.

Edit >> Remember to call close() not hide()!

{ 
  text     : '#{msgs.button_save}',
  window   : this,
  handler  : function () {
    if(this.window.templateEditor.save()) {
      this.window.close(); // call close!
    }
  }
},
{ text     : '#{msgs.button_close}',
  cls : 'secondaryBtn',
  window   : this,
  handler  : function( ){
    this.window.close(); // call close!
  }
}

Edit

Disclaimer: the following way is just a workaround

Ext.define('MyPack.template.RestfulTemplateWindow', {
    extend : 'MyPack.template.TemplateWindow',
    closeAction: 'destroy', // redefine th close action
    initComponent: function() {
      // all values set would be overrided by the parent
      this.callParent(arguments);
      // identify the buttons somehow
      this.on('beforehide',function(w){w.close();return false;},this);
    }
});