Ext js override init component function

Question

I am trying to override some code in the initComponent function of the Ext.window.MessageBox class. But none of the things that I change get applied.

What is the problem here? Am I missing something?

Ext.define('hds.override.MessageBox', {
    override: 'Ext.window.MessageBox',

   initComponent: function() {

    console.log("init component 1"); //not reached

    this.callParent();


    console.log("init component 2"); //not reached
  }


});

Edit:

I have also tried replacing override with extend and the inside intiComponent is still not reached. Do I need to change the location of the file when changing to extend??

Answer 1

If what you want is to change the behavior of Ext.Msg which is an instance of the class Ext.window.MessageBox you need to make it an instance of your overridden class:

Ext.define('MyMessageBox', {
    override: 'Ext.window.MessageBox',
    initComponent: function() {
        this.callParent();
        //your changes here..
    }
},function() {
    Ext.MessageBox = Ext.Msg = new this();
});

Check out this fiddle where I changed the default padding inside initComponent