View Full Version : Tree taking long time in loading when records exceeds 200 count

19 Oct 2012, 7:52 AM

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.[
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,
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'
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: { 'font:size': '20px' },
// viewConfig: {
// style: { overflowX: 'true' }
// },




23 Oct 2012, 6:48 AM
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

26 Oct 2012, 12:07 PM
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?

26 Oct 2012, 11:12 PM
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.

27 Oct 2012, 6:35 PM
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!