View Full Version : ContainerClear. Plugin to cause Container.remove to remove removed Components

1 Aug 2010, 5:08 AM
If you want a Component to be removed from the DOM, but kept for use later, then use this plugin.

Child Components which are removed and not destroyed (See API docs!!!), are moved into a hidden Container.

* <p>Plugin for the Container class which causes removed (but not destroyed)
* Components to be removed from their place in the DOM, and put into "cold
* storage" in a hidden Container.</p>
* <p>Removed Components may be re-added to other Containers later.</p>
Ext.ux.ContainerClear = new function() {
var bin,
afterRemove = function(comp, autoDestroy) {
if(!this.autoDestroy || (autoDestroy === false)) {
if (!bin) {
bin = new Ext.Container({
id: 'x-bin-container',
cls: 'x-hidden',
renderTo: document.body

this.init = function(ctr) {
ctr.remove = ctr.remove.createSequence(afterRemove);
Ext.preg('container-clear', Ext.ux.ContainerClear);


plugins: 'container-clear',

1 Sep 2010, 8:31 AM
This plugin was a lifesaver for me. However, I rarely need to keep stuff around beyond the scope of the current request, and no more than 1-2 at a time. I added this line above bin.add(comp):

if(bin.items.items.length > 5) bin.remove(bin.get(0));

This will prevent the container from growing too large and cluttering up the DOM/eating up resources.

1 Sep 2010, 9:37 AM
It is specifically for keeping things.

If you don't want the child Component again remove it with autoDestroy true, and it will clean itself up.

1 Sep 2010, 10:06 AM
Of course. But for my case, sometimes the panels don't get reused, depending on what the user does. And usually they are reused immediately (position changed, moved elsewhere on the screen, etc). When they don't get re-inserted on the screen, they just sit there. In case anyone else had a similar circumstance, I thought it might be useful to post.

29 Oct 2010, 11:26 AM
Nice plugin. "Child Components which are removed and not destroyed" means set 'autoDestroy: false' in the containerconfig since its defaulted to true.

13 Dec 2010, 5:23 AM
This is really helpful for working with component delete and re-add... But I have one problem for re-add the removed component. Please tell me how I can add again removed component.
I have removed it using

var parent_component = Ext.getCmp('parent_id');
var child_component = Ext.getCmp('child_id');

a = parent_component.remove(child_component);

Now how can I re-add that removed component.