PDA

View Full Version : Reopening / re-adding a closed tab?



nooneyet
26 Nov 2007, 8:47 AM
Let's say I have a number of tabs (*Panels added to a TabPanel), stored in safe references, so I can get to them whenever I need them.

Whenever the user closes a tab by clicking its x icon, the tab closes and disappears, but apparently the Panel object still stays in memory (*and hey, that's great for quick loading, so no complains from me on this one...).

However, later on, when the user does something else, I want to reopen / re-add / re-show the tab (*I have a reference to the tab itself as well as to its parent TabPanel) - but none of the "visual" methods seem to help with that. Any ideas?

hendricd
26 Nov 2007, 9:05 AM
When the tabPanel item is closed (via 'X') it is removed from the tabPanels items collection, thus your reference still points to the original panel object, but once removed the panel DOM elements and other dependent object are destroyed -- basically useless a second time.

You'll have to add the panel again.

nooneyet
27 Nov 2007, 1:38 AM
When the tabPanel item is closed (via 'X') it is removed from the tabPanels items collection, thus your reference still points to the original panel object, but once removed the panel DOM elements and other dependent object are destroyed -- basically useless a second time.

You'll have to add the panel again.


Thanks Doug, but as I've mentioned, adding is not enough. TabPanel.add() with the same Panel object won't work.

You have to create a new Panel - though the original Panel object seems to live perfectly ever after. That's why I brought this issue up.
I have a Panel, it's loaded with the heavy data it has in its iFrame - why not reshow it (even if it means re-rendering) instead of throwing it as a memory leak and creating a new one?

If I have a single-window application that stays open in the browser for a long time, everytime the user closes and reopens the same tab (a certain view), it's a memory leak.
Considering the fact that Ext is heavy to start with and that each Panel (tab) is not a trivial object, if you use it for a few days, your app might start running slowly.

Moreover, trying to use something like

oPanel.on('close', function(){/* Mark as destroyable or something of the sort */});
this close event doesn't seem to fire as expected.
(Hmmm... should we move this to some bug-related forum?)

mxracer
27 Nov 2007, 7:48 AM
Moreover, trying to use something like

oPanel.on('close', function(){/* Mark as destroyable or something of the sort */});
this close event doesn't seem to fire as expected.
(Hmmm... should we move this to some bug-related forum?)

I have a Tab Panel with closable tabs. The close event isn't firing for me either.



tab = new Ext.Panel({
...
});
tab.on('close', function(){console.log(arguments);});

hendricd
27 Nov 2007, 8:22 AM
Let's say I have a number of tabs (*Panels added to a TabPanel), stored in safe referencesYou're simply storing a reference to each panel, right?

When the panel is closed (x) Containers' remove(item) method is called. With tabPanel.autoDestroy=true(default), when item is removed it is destoyed (item.destroy()). item.destroy tears down the DOM elements used to contain/render it.

So, if you want to preserve the item you want to remove (and re-use later) try setting tabPanel.autoDestroy=false, then add it again with your 'safe reference'.

And, when you want an event that gives you a chance to access an items parent container, try the 'beforedestroy' event for your child panel.


Iframes compound this issue because of IE problems with iframe destruction. See this post (http://extjs.com/forum/showthread.php?p=91634#post91634)for a panel remedy for that.

nooneyet
2 Dec 2007, 6:19 AM
Thanks Doug. The autoDestroy=false is exactly what was missing.