title: ExtJS: Ext.Window Prototypal inherited objects cannot be destroy
body: <p>[ExtJS 3.4.0]
  I have a class with prototypal intheritance to <code>Ext.Window</code>, something like this:</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>When this window is shown, it can be closed by pressing the <code>CancelButton</code> or the built-in "x" button of <code>Ext.Window</code>.</p>
  
  <p>When I <strong>close it with <code>CancelButton</code></strong>, <code>SaveButton</code> and <code>CancelButton</code> <strong>get destroyed</strong> normally.
  But, if is <strong>closed by the "x" button</strong>, the buttons <strong>cannot be destroyed</strong>, the loop is taking forever causing my application to crashed.</p>
  
  <p>After some investigation I found, in <strong>ext-all-debug.js</strong>, this:</p>
  
  <pre><code>Ext.Panel = Ext.extend(Ext.Container, {
  
      .....
  
      if(Ext.isArray(this.buttons)){
          while(this.buttons.length) {
              Ext.destroy(this.buttons[0]);
          }
      }
  
      .....
  
  }
  </code></pre>
  
  <p>which invoke <code>Ext.destroy</code>, this:</p>
  
  <pre><code>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);
      },
  
      .....
  
  }());
  </code></pre>
  
  <p>What appears to be is that, <code>this.buttons</code> -from pressing CancelButton- are Ext.Component thus, it get destroyed normally.
  While <code>this.buttons</code> -from pressing "x"- are not, which <strong>leads to the questions</strong>.</p>
  
  <ul>
  <li>Why <code>this.buttons</code> are not the same objects when it is destroy via different way?</li>
  <li>What are the solution/options I have, if I want/need to retain the inheritance?</li>
  </ul>
  
  <p>Shedding me some lights is most appreciated. Thank you in advance.</p>