PDA

View Full Version : MultiSelectTreePanel - too slow for large number of records



nikita.navale
29 Sep 2016, 4:38 AM
Hi,

I am using MultiSelectTreePanel in one of my screens which is too slow for huge data e.g. it takes around 6 mins to load 1320 records. I have the logic optimized at the server side and that is pretty quick. It is the data rendering and layout that is causing the delay.
The profiler debugging shows that majority time is consumed by the 'offsetWidth' in IE and 'renderElements' (TreeGridNodeUI.js) in Chrome.
I tried the suspendLayout() and resumeLayout(true), didn't really make any difference.

Once the call reaches following line in js, it sits there for a long time:


Ext.ux.tree.TreeGridLoader.prototype.processResponse.call(this, response, node, callback, scope);

Could anyone please guide me on way to optimize the performance for this component. It doesn't seem that I can add paging here too.

Thanks!

Gary Schlosberg
29 Sep 2016, 6:59 AM
Are you talking about this user extension?
https://www.sencha.com/forum/showthread.php?60759

With which versions of IE and Chrome are you seeing this?

nikita.navale
29 Sep 2016, 7:26 AM
Hi Gary,

Yes, that is the component we are using. And the issue we face is with IE11. Chrome is a bit slower (the latest version) but not as much worrying as IE11.

Thanks!

Gary Schlosberg
29 Sep 2016, 3:31 PM
Which specific version of Ext JS are you using? IE11 support began with 3.4.2, though I would expect earlier versions to work fairly well.

nikita.navale
30 Sep 2016, 1:07 AM
I am working with 3.4.4

nikita.navale
30 Sep 2016, 8:18 AM
Just to clarify I'm using MultiSelectTree.js (ux)

ext.ux.MultiSelectTreePanel = Ext.extend(Ext.ux.tree.TreeGrid....

When it hits the loader defined as

loader : new Ext.ux.tree.TreeGridLoader({.....
and then this section of the loader

processResponse : function(response, node, callback, scope) {
Ext.ux.tree.TreeGridLoader.prototype.processResponse.call(this, response, node, callback, scope);...
it then becomes extremely slow on IE11 when there are a large number of records
Using Chrome or IE 9 there is no real issue

I'm not sure why there is a difference and am currently trying to debug to find exactly what causes the delay.
It seems to be all based on TreeGrid so do you know of anything in TreeGrid that was specifically fixed for IE11?
Other than that I'm wondering can I use some kind of paging.
If I create a Json Store for the data can I somehow copy that to the MultiSelectTree?

Thanks

nikita.navale
5 Oct 2016, 3:37 AM
Got it resolved by hiding the component before loading it and then showing it again after processResponse call


processResponse : function(response, node, callback, scope) {
/* Do work... */
packagesTreeGrid.hide(); /* New line */
Ext.ux.tree.TreeGridLoader.prototype.processResponse.call(this, response, node, callback, scope);
packagesTreeGrid.show(); /* New line */
/* Unmask... */
packagesTreeGrid.ownerCt.getEl().unmask();
}