PDA

View Full Version : Tree performance and issue with many nodes



ChristianE
10 Mar 2015, 8:29 AM
Hello together,

as you will notice i am new here…. And of course I have a question : )

I have the requirement to implement a tree where the user is able to check a nodes checkbox and all childs should be expanded and checked.

Its working fine for nodes with “some” childs – but the complete tree contains more than 7.000 nodes….so some nodes have a lot of child…..(I know that is not a good design but the customer is king : ) )

When I check a top level node I have the following problems:


Problem 1: It takes more than 4 seconds to show all sub nodes (extended and checked) – I have already added the suspendLayouts function..it helps but its still “slow” (select checkbox for “Channel - problem 1”)
Problem 2: If there are too many sub nodes the script will hang up so the IE will reload the whole page cause of not responding. – is there a limit of allowed nodes in the tree? (select checkbox for “Channel - problem 2”)
Problem 1: If I minimize the top level node (expand(false)) – not all sub childs will be hidden. When I try to expand the top level node some other will expand…so there must be an error somewhere. – it looks like a bug!? (select checkbox for “Channel - problem 1” and use arrow for this node to “hide” all childs.)



The used JSON data has about 3 MB… (I know its big – a sample is attached).

Used ExtJS version is Ext JS 5.1 (4.2.1 was tested too – same problem)

Here is my code:


Ext.require([ 'Ext.data.*', 'Ext.grid.*', 'Ext.tree.*' ]);
var tree;
var store;
var sObjectName = "";
var oIsLoading = false;



Ext.onReady(function() {
// we want to setup a model and store instead of using dataUrl
Ext.define('ispnHierarchy', {
extend : 'Ext.data.Model',
fields : [ {
name : 'ispnName',
type : 'string'
}, {
name : 'ispnID',
type : 'string'
}, {
name : 'ispnParentID',
type : 'string'
}, {
name : 'ispnType',
type : 'string'
}, {
name : 'editEnable',
type : 'boolean'
}, {
name : 'ispnOrder',
type : 'string'
}]
});




store = Ext.create('Ext.data.TreeStore', {
storeId : 'ispnStore',
model : 'ispnHierarchy',
sorters : 'ispnOrder',
autoLoad:false,
proxy : {
type : 'ajax',
// the store will get the content from the .json file
url : 'fake.json',
reader : {
type : 'json',
idProperty : 'ispnID',
root : 'ispnHierarchy',
successProperty : 'success'
}
},

folderSort : true
});


tree = Ext.create('Ext.tree.Panel', {
renderTo: Ext.getBody(),
title: 'ISPN' + sObjectName,

forceFit: false,
width: 800,
height: 600,


rootVisible: false,
useArrows: true,
displayField : 'ispnName',
id : 'ispnTree',
store: store,
listeners:
{
checkchange: function(node, checked, options)
{

// performance
tree.suspendLayouts();

//select all sub nodes and expand tree.
node.cascadeBy(function(n)
{
// do not show checkbox for disabled nodes.
var oIsDisabled = n.raw.disabled;
if (oIsDisabled == true)
{
// do nothing
}
else
{
n.set('checked', checked);
}

n.expand();
} );
// performance
tree.resumeLayouts(true);

},

beforeload: function( store, operation, eOpts )
{
// show loading mask when start to load data
this.setLoading('Loading data......');
oIsLoading = true;
},

load: function( obj, records, successful, operation, node, eOpts )
{
// hide loading mask....
this.setLoading(false);
oIsLoading = false;
}
}
});


});



Thx for feedback regarding my topics.

Christian

yeghikyan
10 Mar 2015, 9:28 AM
Let's imagen that the custromer is King :D

You can try 'bufferedrenderer' so your code will be something like this... unfrutunately fiddle did not want to save your code (the JSON is too big).
In the 5-th version it comes by default... with some exceptions... jedenfalls 7000 DOM nodes on the page... :-|




// we want to setup a model and store instead of using dataUrl
Ext.define('ispnHierarchy', {
extend: 'Ext.data.Model',
fields: [{
name: 'ispnName',
type: 'string'
}, {
name: 'ispnID',
type: 'string'
}, {
name: 'ispnParentID',
type: 'string'
}, {
name: 'ispnType',
type: 'string'
}, {
name: 'editEnable',
type: 'boolean'
}, {
name: 'ispnOrder',
type: 'string'
}]
});


Ext.application({
name: 'Fiddle',


launch: function() {
var store = Ext.create('Ext.data.TreeStore', {
storeId: 'ispnStore',
model: 'ispnHierarchy',
sorters: 'ispnOrder',
autoLoad: false,
proxy: {
type: 'ajax',
// the store will get the content from the .json file
url: 'TreeJson',
reader: {
type: 'json',
idProperty: 'ispnID',
root: 'ispnHierarchy',
successProperty: 'success'
}
},


folderSort: true
});


var counter = 0;
var tree = Ext.create('Ext.tree.Panel', {
renderTo: Ext.getBody(),
title: 'ISPN',


forceFit: false,
width: 800,
height: 600,




rootVisible: false,
useArrows: true,
displayField: 'ispnName',
id: 'ispnTree',
store: store,
plugins: [{
ptype: 'bufferedrenderer'
}],
listeners: {
checkchange: function(node, checked, options) {


// performance
tree.suspendLayouts();


//select all sub nodes and expand tree.
counter = 0;
node.cascadeBy(function(n) {
// do not show checkbox for disabled nodes.
var oIsDisabled = n.raw.disabled;
if (oIsDisabled == true) {
// do nothing
} else {
counter++;
n.set('checked', checked);
}


n.expand();
});
// performance
tree.resumeLayouts(true);
console.log('Checked: ' + counter);


},


beforeload: function(store, operation, eOpts) {
// show loading mask when start to load data
this.setLoading('Loading data......');
oIsLoading = true;
},


load: function(obj, records, successful, operation, node, eOpts) {
// hide loading mask....
this.setLoading(false);
oIsLoading = false;
}
}
});
}
});

ChristianE
10 Mar 2015, 11:51 PM
Hi Yeghikyan,

i already tried the “bufferedrenderer”….at least I thought that I did that…maybe I placed it on the wrong location…whatever with your sample the performance issue is gone YIPPI!!!!! :D


THX for that…

But there is one more thing…..

My Problem 2…. With the usage of “bufferedrenderer” I can test the node with so many childs that it hangs on before – now it will expand but the nodes will be shown across the tree and not in a normal order ; )
Some childs will be displayed directly under the root and so on…… any idea on this?

*see pics*



Thx in advanced
Christian