Optimizing Ext.tree.TreePanel performance

Question

I have an Ext.tree.TreePanel used with AsyncTreeNodes. The problem is that initially the root node needs to have more than 1000 descendants. I succeeded at optimizing the DB performance, but the JavaScript performance is terrible - 25 seconds for adding and rendering 1200 nodes. I understand that manipulating the page's DOM is a slow operation, but perhaps there is some way to optimize the initial rendering process.

Answer 1

I don't think you'll have much luck optimizing a tree with that many nodes. Is there any way you could use a grid to deliver the information? You could at least set up paging with that, and it would probably be a lot faster. You could also implement the row expander UX on the grid, which behaves like a tree, sort of, for each row.

Answer 2

You could create a custom tree node UI that has a lower DOM footprint. In other words, change the HTML that is used to create each node of the tree to some less verbose (and likely less flexible) HTML.

here are some references for doing that:

http://github.com/jjulian/ext-extensions/blob/master/IndentedTreeNodeUI.js

http://david-burger.blogspot.com/2008/09/ext-js-custom-treenodeui.html

Enjoy.