title: Destroying the window
body: <p>I am using ExtJs4.</p>
  
  <pre><code>new Ext.Window({
      id: token + '_window',
      animateTarget: token + '_taskbar',  //Button id
      height: 300,
      width: 300,
      title: name,
      maximizable: true,
      minimizable: true,
      iconCls: 'basketball-small-icon',
      html: 'This is the &lt;b&gt;' + name + '&lt;/b&gt; window',
      listeners: {
          'beforeclose': onWindowClose,
          'minimize': function(){ this.hide(); }
      }
  </code></pre>
  
  <p>Note the button to which the animate target is associated.
  Here the onWindowClose is defined as</p>
  
  <pre><code>function onWindowClose(t){
  var token = t.id.split('_')[0];
  var taskBarItemId = token + '_taskbar';
  
  Ext.getCmp(taskBarItemId).destroy(); //Destroying the button
  t.destroy();  //Destroying the window
  }
  </code></pre>
  
  <p>Here I want to remove the window and the associated button.
  Everytime I close the window, I have two choices as below</p>
  
  <ul>
  <li>I can destroy both the button and the window but sometimes I can't open the window again. I think this has something to do with the fact that the button is linked to window's 'animateTarget'. Because when I remove this property, this works fine.</li>
  <li>I can use t.close() instead of t.destroy(), but it becomes recursive. How can I call the base close method?</li>
  </ul>
  
  <p>Is it a good idea to destroy the window everytime and create using 'new' whenever the icon is clicked?
  What is difference between close() and destroy() methods?</p>