PDA

View Full Version : [CLOSED][3.??] Container.insert(index,comp) rendering issue



cstansbury
8 Jan 2010, 6:58 AM
Ext 3.1.0, Mac OSX, Firefox 3.5.7 & Safari 4.0.4

I'm trying to manually reposition items within a container. It appears that this is supported functionality (via the Container.insert(index,comp) function), as it detects the child is already present, and performs a (remove, add) correctly.

The problem is, if I invoke a doLayout() after this function call, no change is reflected... However, if I manually remove the (existing) component, and then add it back as a (newly created) component, it works...

What doesn't work:
this.insert(new-index, old-comp);
this.doLayout();

What works:
this.remove(old-comp);
this.insert(new-index, new-comp);
this.doLayout();

Animal
8 Jan 2010, 7:12 AM
The problem is remove does not remove from the DOM.

So the automatic remove which happens leaves the Component's DOM in place there. Then ContainerLayout.renderItem does not do anything if the Component's DOM is anywhere in the correct DOM element.

But your code is incorrect too. It destroys the element (which removes it from the DOM) and re-inserts it. Once destroyed it is not usable and will behave unpredictably.

You will have to



this.remove(oldComp, false);
var d = oldComp.getPositionEl().dom;
d.parentNode.removeChild(d);
this.insert(new-index, oldComp);
this.doLayout();

cstansbury
8 Jan 2010, 8:01 AM
Actually, the "new-comp" was really creating a new component from scratch, rather than trying to reuse the one that was removed... so I wasn't experiencing any issues.

However, I forgot that there was the remove(comp, boolean) functionality that you pointed out, which is better than what I was doing (saves me having to destroy and recreate essentially the same component).

Thanks for replying back and clearing up my confusion...

adrianrosca
9 Jan 2010, 12:04 PM
I went through quite some pain before I found this post. I cannot understand why "panel.remove(cmp, false)" doesn't do exactly this by itself. I thought the major point with using panels is to not having to bother with the underlying DOM.

Thanks a bunch for your help, Animal.

Animal
10 Jan 2010, 4:23 AM
Try adding this override



Ext.override(Ext.Container, {
doRemove: Ext.Container.prototype.doRemove.createSequence(function(c, autoDestroy){
if (!(autoDestroy === true || (autoDestroy !== false && this.autoDestroy))){
this.getLayoutTarget().dom.removeChild(c.getPositionEl().dom);
}
})
});


It removes the DOM of a removed Component.

I've no idea why this isn't done anyway.

Condor
10 Jan 2010, 10:43 PM
It removes the DOM of a removed Component.

I've no idea why this isn't done anyway.

It will probably break Ext, because Ext.get() won't be able to locate the element (because it is not part of the DOM anymore).

IMHO, your other solution to move the element to a hidden container element ('trashcan') is better.

Animal
10 Jan 2010, 11:01 PM
Yes, I forgot about that post. There should definitely be a trashcan hidden Container into which removed but undestroyed Components are placed.

Animal
14 Jan 2010, 3:11 AM
It will probably break Ext, because Ext.get() won't be able to locate the element (because it is not part of the DOM anymore).

IMHO, your other solution to move the element to a hidden container element ('trashcan') is better.

Actually, I think it will be OK unless the developer clears the element cache. Ext won't do an Ext.get won't even do another document.getElementById. It finds the reference from its cache.

So that override should work

Jamie Avins
14 Jan 2010, 10:31 AM
I went through quite some pain before I found this post. I cannot understand why "panel.remove(cmp, false)" doesn't do exactly this by itself. I thought the major point with using panels is to not having to bother with the underlying DOM.

Thanks a bunch for your help, Animal.

Because remove isn't destroy. I made this argument before and Evan convinced me it is correct. I'm sure the documentation should stress this fact, but many people remove containers then re-use them elsewhere.