ContainerClear. Plugin to cause Container.remove to remove removed Components

[Animal]

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.ns("Ext.ux");
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
});
}
bin.add(comp);
bin.doLayout();
}
};

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


usage:



plugins: 'container-clear',

[winklerd]

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.

[Animal]

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.

[winklerd]

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.

[qooleot]

Nice plugin. "Child Components which are removed and not destroyed" means set 'autoDestroy: false' in the containerconfig since its defaulted to true.

[pratik016]

Hi,
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.