Appending elements to a EXTJS tree is causing stop script error in IE

Question

In Our app, we are having a tree (created using Ext.tree.Panel) and there are some nodes which has child nodes of around 2500.

When we try to load the data into the tree Internet Explorer is showing a pop up saying “Script is causing Internet explorer to run slowly, Stop running the script?”.

We figured out that if childnodes are less than 500 IE doesn’t give error. Hence we are trying to load only 400 childnodes at a time and load remaining on click of a button available on the page.

Unfortunately, IE is still giving error. I have just created sample of what we are trying to do using jsfiddler. Below are the links.

Code sample here

result here

Below is the code.

function addNodes() { var node = Ext.getCmp('sampleTree').items.items[0].node.childNodes[0];

for (var cnt = 0; cnt < 400; cnt++) {
    node.appendChild({
        "task": cnt + "Hello",
        duration: cnt,
        user: 'Tommy Maintz' + cnt,
        iconCls: 'task',
        leaf: true
    });

}

};

Any advice on how to resolve this?

Answer 1

ExtJS Tree is a very heavy component by default. For the code given by you, each time you add a node, It does a complete layout calculation. And the calculation happens a few times if you haven't switched off animation. Two ways of performance improvement for a tree.

• Suspend layouts before you start adding the nodes and resume it after all nodes are added. refer Ext.suspendLayouts method in the Ext docs.
• Force to switch off animation animate:false ; This will hit the user experience slightly, so you can even think about making this optional for IE using the Ext.isIE methods