NodeInterface.removeAll() causes plus sign to disappear

[bjnelson62]

I have an application where there's a tree on the left, and a grid on the right. I'm allowing the user to delete items in the grid, which all works. I just reload the grid, and all is well.

But updating the tree is another matter. I've tried the following:

1. Collapse the tree node, then remove the children:


treeSel.collapse(
false,
function() {
treeSel.removeAll(true);
},
me);




This doesn't work. As I step through the debugger, I can see that the node is collapsed correctly, but the children are left hanging out in space. Calling removeAll() causes the children to be removed from the screen, but also the plus sign from the parent is also removed with no way to get it back.

2. A variation of #1, in which I call treeSel.collapse();, but also handle afteritemcollapse in the tree and THEN remove the children.

Unfortunately, this works no better. Same result, the plus sign is removed with no way to get it back.

I strongly suspect a bug. The docs say the callback passed to collapse() is called *after* the collapse, but that's not entirely true. Yes it's called after the node is collapsed, but it's not called after the UI is updated after the collapse, which is what I expected. And variation #2 should definitely work.

Is there a way to remove all the children without losing the plus sign? In all the UI frameworks I've worked with, there was always a way to clear out the children such that when the user clicked the plus sign the server would be hit again to fetch the children.

Is there a way to do this in ExtJs?

Thank you,


Brian

[bjnelson62]

Forgot to mention, I'm using 4.1.2a of the framework.

I also tried deleting the children one by one manually, but sure enough, as soon as the last child is deleted, the plus sign disappears.

[bjnelson62]

One more thing I tried:

In the afteritemcollapse handler, I made a copy of one of the nodes, and set the text to be some constant. I figured in the beforeitemexpand handler, I could check for this node, and if present just remove it prior to doing anything else.

But I didn't get that far. The dummy node caused the plus sign to remain, but it still doesn't work.

No matter how you cut it, removing children out of the tree causes problems.

[vietits]

Try this:


treeSel.collapse(
false,
function() {
treeSel.removeAll(true);
treeSel.set('loaded', false); // marked this node as not loaded -> it may has children to load -> display + sign.
},
me
);

[bjnelson62]

Thank you!

I should have mentioned that after the removeAll() call, I'd tried things like:

setDirty()

and

treeSel.loaded = false;

But what you wrote works.

I think this should be better documented. This is not at all obvious, and I looked all over (this forum, the web, and the docs). This is a very common operation. Maybe I missed it in an example. I think a separate function would make it more obvious (I admit, I was looking mainly in NodeInterface, because this is an operation on the node, more so than the Model).

Thank you very, VERY much. I spent a lot of time on this (probably a day or two).

[bjnelson62]

Here's a follow-on:

The call to removeAll(true) is causing a couple of POSTs to the server that I want to avoid. Here's what I've tried:



node.beginEdit();
node.removeAll(true);
node.set('loaded', false); // mark as unloaded, ensure plus sign shown
node.endEdit(false, null);


and:



node.suspendEvents();
node.removeAll(true);
node.set('loaded', false); // mark as unloaded, ensure plus sign shown
node.resumeEvents(false);


But so far, I can't seem to avoid the POSTs.

[bjnelson62]

I found a way, just pass false to removeAll().

This means the node isn't destroyed. Is there any downside to this?