Ext JS very slow check/uncheck nodes in tree since 4.2 version

Question

I use cascadeBy function and record.set('checked', checked); to check/uncheck child nodes in Ext JS treepanel. In 4.0.7 and 4.1 version of EXT JS all works fast. But when I upgrade my project to 4.2 version this operation use more then 4 times more time.

Here is example:

http://jsfiddle.net/CaV3n/1/

checkchange: function (record, checked, opts) {

    var i=0;
    var start=new Date;
record.cascadeBy(function(e) {

    i++;
    e.set('checked', checked);
    });
    var stop = new Date;
    alert(i +'items '+ (stop-start)+'ms');

}

if i use version 4.2.0 I have 132 items rendered in 2677ms

if I use version 4.1.0 I have 132 items rendered in 735ms

if I use version 4.1.1 I have 132 items rendered in 645ms

How can I improve treepanel speed ?

VDP · Accepted Answer · 2014-03-04T16:11:45.443

I would log this in the ExtJS forum as an 'issue/bug'

But to boost performance use suspendLayouts()

    checkchange: function (record, checked, opts) {
        var i = 0;
        var start = new Date();
        panel.suspendLayouts();
        record.cascadeBy(function (e) {
            i++;
            e.set('checked', checked);
        });
        panel.resumeLayouts();
        var stop = new Date();
        alert(i + 'items ' + (stop - start) + 'ms');

    }

Here is a working fiddle:

http://jsfiddle.net/Vandeplas/8Dq2s/

It renders in 1/10 of the time before... more like 60ms!

This method is designed for these 'batch' updates.

Thanks! This has just saved me from a huge performance hole on a customer system. — AJFaraday, Apr 28 '16 at 14:45

Ext JS very slow check/uncheck nodes in tree since 4.2 version

1 Answers1