Destroying the window

event-handling, extjs, extjs4, window

I am using ExtJs4.

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 <b>' + name + '</b> window',    listeners: {        'beforeclose': onWindowClose,        'minimize': function(){ this.hide(); }    }

Note the button to which the animate target is associated.
Here the onWindowClose is defined as

function onWindowClose(t){var token = t.id.split('_')[0];var taskBarItemId = token + '_taskbar';Ext.getCmp(taskBarItemId).destroy(); //Destroying the buttont.destroy();  //Destroying the window}

Here I want to remove the window and the associated button.
Everytime I close the window, I have two choices as below

  • 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.
  • I can use t.close() instead of t.destroy(), but it becomes recursive. How can I call the base close method?

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?

Best Solution

If I understand well, you want to reuse the window, with a different content.So, you should create only one window, that you reuse by updating the html content and calling show() on this window.To perform that, you need to add the property closeAction:'hide'. This way, your window won't be destroyed when clicking on the close button.

test = new Ext.Window({    id: token + '_window',    animateTarget: token + '_taskbar',    height: 300,    width: 300,    title: name,    maximizable: true,    minimizable: true,    closeAction: 'hide',    iconCls: 'basketball-small-icon',    html: 'This is the <b> imad </b> window',    listeners:{        'beforehide':function(win){            Ext.getCmp(win.animateTarget).hide();        }    }});

Then, you add this listener to your buttons :

    listeners:{        'click':function(){            var token = t.id.split('_')[0];            var targetWindow = Ext.getCmp('token + '_window);            targetWindow.body.dom.innerHtml = 'Your new html !';            targetWindow.show();        }    }