Tree taking long time in loading when records exceeds 200 count

[Manoj.Aggarwal]

Hi

We are using Ext Tree in our project . We observered that whenever the record counts increases 200 count, tree takes long time in rendering . Data from the server comes in around max 1 sec but rendering of the tree takes more than 20-25 secs.

I am posting below the code we have been using in our project . I would request you to review my code and help us in knowing what wrong is happening.[
code]
Ext.define('treeNode', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'string' },
{ name: 'text', type: 'string' },
{ name: 'code', type: 'string' },
{ name: 'nodeType', type: 'string' },
{ name: 'qtip', type: 'string' }
]
});

var store = Ext.create('Ext.data.TreeStore', {
model: 'treeNode',
sortOnLoad: false,
batchUpdateMode:'complete',
proxy: {
type: 'ajax',
url: 'Services/InfographicsDataService.svc/GetTree',
extraParams: {
langCode: lcode,
surveyCode: scode
},
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
reader: {
type: 'json',
root: 'd'
}
},
listeners:
{
append: function () {

},
load: function () {

},
write: function () {

}
},
root: {
text: 'CodeBook(' + scode.toUpperCase() + ')',
id: 'root',
expanded: true
}

});

this.tree = Ext.create('Ext.tree.Panel', {
store: store,
columnLines: true,
header: false,
renderTo: 'tree-div',
height: 220,
width: 713,
useArrows: false,
iconCls: 'x-tree-noicon',
style: { 'fontize': '20px' },
// viewConfig: {
// style: { overflowX: 'true' }
// },

});

[/code]



Regards,

[mitchellsimoens]

The issue may not be your code but the tree trying to render everything and browser having to take time to do it for that many nodes

[celticboyone]

Might be something else - does the render time change with the timout set in the proxy, if you set it to 10000 for example is the render time redubced to about 10 seconds? If you set "Autoload" for the store does it render fast then?

[Manoj.Aggarwal]

Hi ,

Thanks for reply.

I have found the problem. Problem is in the line
root: {
expanded: true
}

with root expanded setting, tree loads the next level data also BUT- It loades next level data in non batchupdate mode and thus takes a lot of time specially in getHeight method(extjs calls internally) which tree calls for each node.
If I keep root node expanded false and expand programatically my root node and in after render event ( afterrender:function (tree) {tree.getRootNode().expand();) then tree loads next level data in batchupdate mode and loads the tree in less than 1 sec.

If I am unclear let me know. I would try to explain more. rest extjs people can make us understand.

[celticboyone]

Well done, and thank you for letting us know. Nested lists are powerful but they have a log of quirks - I spend more time on them than almost anything!