ExtJS: Ext.Window Prototypal inherited objects cannot be destroy

Question

[ExtJS 3.4.0] I have a class with prototypal intheritance to Ext.Window , something like this:

function Cls_MyWindow() {

    .....

    var SaveButton = new Ext.Button({...});
    var CancelButton= new Ext.Button({...});

    .....

    Cls_MyWindow.prototype.width = Ext.getBody().getWidth() - 800;
    Cls_MyWindow.prototype.height = Ext.getBody().getHeight() - 350;
    Cls_MyWindow.prototype.plain = true;
    Cls_MyWindow.prototype.buttons = [SaveButton, CancelButton];

    .....

}

Cls_MyWindow.prototype = new Ext.Window;
Cls_MyWindow.prototype.constructor = Ext.Window;

When this window is shown, it can be closed by pressing the CancelButton or the built-in "x" button of Ext.Window .

When I close it with CancelButton , SaveButton and CancelButton get destroyed normally. But, if is closed by the "x" button , the buttons cannot be destroyed , the loop is taking forever causing my application to crashed.

After some investigation I found, in ext-all-debug.js , this:

Ext.Panel = Ext.extend(Ext.Container, {

    .....

    if(Ext.isArray(this.buttons)){
        while(this.buttons.length) {
            Ext.destroy(this.buttons[0]);
        }
    }

    .....

}

which invoke Ext.destroy , this:

Ext.apply(Ext, function(){

    .....

    destroy : function(){
        Ext.each(arguments, function(arg){
            if(arg){
                if(Ext.isArray(arg)){
                    this.destroy.apply(this, arg);
                }else if(typeof arg.destroy == 'function'){
                    arg.destroy();
                }else if(arg.dom){
                    arg.remove();
                }
            }
        }, this);
    },

    .....

}());

What appears to be is that, this.buttons -from pressing CancelButton- are Ext.Component thus, it get destroyed normally. While this.buttons -from pressing "x"- are not, which leads to the questions .

• Why this.buttons are not the same objects when it is destroy via different way?
• What are the solution/options I have, if I want/need to retain the inheritance?

Shedding me some lights is most appreciated. Thank you in advance.

Answer 1

If we stay within Ext 3.4.0 boundaries, not reaching back to the plain javascript then you haven't done inheritance correctly. Inheritance is already implemented in Ext, so you do not need to go down to prototypes, creating constructors as instances of parent classes, and so on.

Let's suppose you want to define MyWindow class inheriting from Ext.Window :

Ext.define('MyWindow',{
    extend:'Ext.Window'
   ,method:function(){/* some stuff */}
   ,closable:false // don't create close box
   ,closeAction:'hide'
   // etc
});

To create an instance:

var win = Ext.create('MyWindow', {
    width:800
   ,height:600
});
win.show();

For more info see Ext.define docs.

Answer 2

After days, I've found an answered from Inheritance using prototype / “new” . The code around my first code block at the bottom part is where I got it wrong.

Cls_MyWindow.prototype = new Ext.Window;
Cls_MyWindow.prototype.constructor = Ext.Window;

The " new " at "new Ext.Window" operator there is my mistake.

• Why this.buttons are not the same objects when it is destroy via different way?

Answer: Because of the new operator, when I created a new instance of Cls_MyWindow total of 2 constructors get called: one of the Cls_MyWindow , another of Ext.Window . Which then cause them to have "their own prototype of buttons " where SaveButton and CancelButton available in Cls_MyWindow as Ext.Button objects and in Ext.Window as a plain Object

Closing Cls_MyWindow with CancelButton -> The buttons can be destroyed in Ext.Window.destroy's way. Closing it with "x" -> The buttons cannot be destroyed.

Solution: I change my code to

//Cls_MyWindow.prototype = new Ext.Window; the old one
Cls_MyWindow.prototype = Ext.Window.prototype;
Cls_MyWindow.prototype.constructor = Ext.Window;

and everything works perfectly