PDA

View Full Version : RemoveAll(false) not working



ykoehler
10 Jun 2010, 12:09 PM
I have a panel (mainMenuBox) which hold a tree panel. I then call mainMenuBox.removeAll(false); then mainMenuBox.add(anotherTree); and mainMenuBox.doLayout(); and what I see is both of the tree being displayed. As if the first one wasn't removed when I first called removeAll(false);

If I set the value to true inside removeAll() then the element disappear, but obviously in this case I want to keep my previous tree as it may return later on when user select something outside of this "mainMenuBox".

My claims:



var tree1 (TreePanel)
var tree2 (TreePanel)

mainMenuBox = Ext.Panel
mainMenuBox.add(tree1);
mainMenuBox.doLayout();

outside event:
{
mainMenuBox.removeAll(false);
mainMenuBox.add(tree2);
mainMenuBox.doLayout(false);
}
Renders both tree, when I would have expected the first tree to disappear and the tree #2 to show up alone.

Any idea, suggestion, help on why this is not working, note that at this time I am using Ext JS 3.2.0

I will try to build a complete sample application to share it and display the issue.

--
Yannick Koehler

steffenk
10 Jun 2010, 4:07 PM
any reason why you don't destroy the items? You still have tree1 to add it.

ykoehler
11 Jun 2010, 4:21 AM
My application has 2 trees, you first select the element you want to change inside the first tree and based on the selection of the first tree the second tree appear with the appropriate menu item corresponding with the choice made in the first tree.

The trees are static, and I do not see a need to destroy the object and re-create it each time the user change the selection in the first tree, question of speed and simplicity.

And considering that the function removeAll(false) is supposedly removing all items from a panel this seems like a valid approach.

--
Yannick Koehler

ykoehler
11 Jun 2010, 5:11 AM
Here is a sample application that demonstrate the problem described. After running this application you end up with panel 1 and panel 2 both visible inside the viewport when the removeAll(false); function is supposed to have removed panel1, so the second call to doLayout() can't render a child that the container no more have...


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();
});

ykoehler
11 Jun 2010, 6:33 AM
By comparing the code for removeAll(true) and removeAll(false), I found out what the problem is. It seems that ext js doesn't support removing a panel after the render steps. The code that remove the item from the DOM is inside the Ext.Panel.beforeDestroy(), I changed it to be insde the Ext.Panel.remove() function and now things works properly.


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

removeFromDOM: function() {
if(this.rendered){
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
);
}
this.rendered = false;
}
}
});