performance - 自 4.2 版本以来,Ext JS 检查/取消检查树中的节点非常慢

标签 performance extjs extjs4.2 treepanel

我使用cascadeBy函数和record.set('checked',checked);选中/取消选中 Ext JS 树面板中的子节点。 在 4.0.7 和 4.1 版本的 EXT JS 中,一切都运行得很快。但是当我将项目升级到 4.2 版本时,此操作使用的时间多了 4 倍以上。

这里是示例:

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');

}

如果我使用版本 4.2.0,我会在 2677 毫秒内渲染 132 个项目

如果我使用版本 4.1.0,我会在 735 毫秒内渲染 132 个项目

如果我使用版本 4.1.1,我会在 645 毫秒内渲染 132 个项目

如何提高树面板速度?

最佳答案

我会将其作为“问题/错误”记录在 ExtJS 论坛中

但是为了提高性能,请使用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');

    }

这是一个工作 fiddle :

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

它的渲染时间是之前的 1/10...更像是 60 毫秒!

此方法是为这些“批量”更新而设计的。

关于performance - 自 4.2 版本以来,Ext JS 检查/取消检查树中的节点非常慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22176563/

相关文章:

html - sencha 或 Extjs 怎么样?

javascript - ExtJs - 编辑器网格面板添加用于删除行的列

tabs - Extjs 4.2 - 更改非事件选项卡的 css

javascript - 在javascript中用天数计算月份

java - 如何计算程序运行时消耗了多少时间

sql - 增加 "select top"返回的行突然使查询变得非常慢

c++ - 未对齐的加载与未对齐的存储

javascript - 提高 React 用户界面性能的良好实践?

javascript - 如何在 Extjs 中更改 Treepanel 中访问的节点颜色,就像我们在 html 中一样

ExtJs 双击行并将记录传递到输入字段中的另一个窗口