[CLOSED] remove(false)/removeAll(false) keep the items visible

[ykoehler]

If you aren't destroying an object when removing it from a panel it won't be removed from the DOM, meaning that it won't be in the parent container's items list anymore but will still be visible on the screen as if it was still in the parent container.

Code to reproduce the bug:


Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'images/s.gif';

var panel1 = new Ext.Panel({
id: 'panel1',
title: 'Panel 1'
});

var panel2 = new Ext.Panel({
id: 'panel2',
title: 'Panel 2'
});

var viewportBodyPanel = new Ext.Panel({
id: 'viewportBodyPanel'
});

var viewport = new Ext.Viewport({
layout: 'fit',
items: viewportBodyPanel
});

viewportBodyPanel.add(panel1);
viewportBodyPanel.doLayout();

viewportBodyPanel.removeAll(false);
viewportBodyPanel.add(panel2);
viewportBodyPanel.doLayout();

/* Expectation is that panel2 is now visible and panel1 isn't anymore yet remains a valid panel
that may later be added elsewhere. */
});
Code to fix the bug:


Ext.Panel.override ({
remove: function(comp, autoDestroy) {
if(this.rendered){
comp.removeFromDOM();
this.rendered = false;
}
Ext.Panel.superclass.remove.call(this, comp, autoDestroy);
},

removeFromDOM: function() {
Ext.destroy(
this.ft,
this.header,
this.footer,
this.toolbars,
this.tbar,
this.bbar,
this.body,
this.mc,
this.bwrap
);
if (this.fbar) {
Ext.destroy(
this.fbar,
this.fbar.el
);
}
}
});
--
Yannick Koehler

[Jamie Avins]

If you are removing it and not destroying it, you are responsible for handling where you want it afterward. The framework isn't going to make an assumption as to what to do with it from there.

[ykoehler]

Well if I don't want it anywhere else for a short period of time what is the process to do that? I want it to be removed from the DOM so that in a short time when the user do something else it may have to be bring back to life. The problem is that the remove is not actually removing it... It removes it internally but the object remove is still there, so I do not understand why this is called "remove".

Btw my solution is not fully working, there is a bug in it, but someone with more knowledge about the framework could figure it out better than me.

[evant]

It removes the item from the container object. If you want to hide the component, then hide it.

[joec2000]

Sorry guys, but I have to agree with "ykoehler" here. Something isn't right here.

To me, there are 3 different things a developer could want to do here:
1. Remove an object from a container and destroy the object being removed - removeAll(true)
2. Hide an object, but not remove it from a container - hide()
3. Remove an object from a container such that it is not visible in the container any more, but still "alive" (i.e. not destroyed). Is this what hide() really does?

Here's a use case for #3. Imagine I have a region center panel in a ViewPort. I want to swap different panels into the region center panel depending upon what the user does. #1 doesn't really work here because I don't want to destroy a panel when I perform a swap - I might use the panel again later. #2 hide could work, but I'd have to find the object I want to hide before I can hide it (removeAll is convenient because I don't have to find the object I want to remove first).

If hide() REALLY is the correct thing to do in case #3, has any thought been given to a hideAll() type of method?

Regardless, at the very least, this out-of-the-ordinary behavior/wording should be better documented.

Just my $0.02

- Joe