如何优化子组件内事件的布局性能？

Question

我有一个这样设计的组件，这不是代码，只是组件结构的高级表示。

Container {
   child1 : {

   },
   child2 : {

   },
   child3 : {

   },
   ...
}

Child component : {
   event that will cause layout update
}

现在，每当事件在子组件中触发时，页面就会变得非常慢。由于事件代码是写在组件中的，我不知道如何使用 suspendLayout()。

有什么办法吗？

Answer 1

你可以用 批量布局. 这将暂停所有布局，直到你的功能完成。

Container {
   child1 : {

   },
   child2 : {

   },
   child3 : {

   },
   ...
}

    Child component : {     
        // event that will cause layout update
        event: function() {        
            const me = this;

            Ext.batchLayouts(function() {
                // Your code            
            }, me);
        }
    }