PDA

View Full Version : How to replace all node from tree(treegrid) most efficiently



wzl002
4 Jun 2013, 11:13 PM
How to replace all node from tree(treegrid) most efficiently? just like the "loadData" in grid store.

I have a tree with 100 nodes and I want to do some change with them like add or remove some node or order them, then reset them back.

These are what I tried:
I tried replace 100 row records with a grid, it cost 200ms in FF12.


grid.store.loadData(data, false);


But now I need do that with a treegrid, I found that the tree do not have a method to replace all node like "loadData", is it?

Then I tried some code like

tree.setRootNode({children:nodes})
or

root.removeAll(); root.appendChild(nodes)

but any of these code costs more than 1000ms, alse whith "suspendLayouts"

slemmon
6 Jun 2013, 11:30 AM
setRootNode is what I've used before. Since you have a quite a few nodes have you tried using the bufferedrenderer plugin? Like in this example:
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/tree/buffer-rendered-treegrid.html

wzl002
6 Jun 2013, 6:06 PM
setRootNode is what I've used before. Since you have a quite a few nodes have you tried using the bufferedrenderer plugin? Like in this example:
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/tree/buffer-rendered-treegrid.html

Thank you very much. But setRootNode is too much low efficiency. And I tried bufferedrenderer too, it's works and make 'cellRender' half less, but still double time cost then grid.store.loadData().


Now I tried code like this:


Ext.suspendLayouts();
root.collapse();
root.removeAll();
root.appendChild(newNodes, true); //suspendEvent
for(var i = 0; i < root.childNodes.length; i++) {
// root.fireEventArgs("append", [root, root.childNodes[i], i]);
this.fireAppandEventArgs(root, [root, root.childNodes[i], i]); //overwrite fireEventArgs.
}
Ext.resumeLayouts(false);

root.expand(); // <-- cost much time.


I found the "fireEventArgs" method in NodeInterface call too much fire method. So I'm trying to rewrite the 'removeAll', 'appendChild', 'expand' to change the fire into direct call.

Any better idea?

wzl002
8 Jun 2013, 6:00 PM
I got it in a bad way:


tree.setRootNode({
children:newNodes,
expanded:true
});


I trace the code, copy them out and write a new '_setRootNode' method.
1. Ext.resumeLayouts(true); changed into Ext.resumeLayouts(false);
2. All fireEvent changed into direct method call. Specilly NodeInterface.fireEventArgs.

The copy deep into TreeStore, Tree, NodeStore, NodeInterface.