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

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

Container {
   child1 : {

   },
   child2 : {

   },
   child3 : {

   },
   ...
}

Child component : {
   event that will cause layout update
}

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

有什么想法吗

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

Container {
   child1 : {

   },
   child2 : {

   },
   child3 : {

   },
   ...
}

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

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

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

Container {
   child1 : {

   },
   child2 : {

   },
   child3 : {

   },
   ...
}

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

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

---

但这里的问题是，事件将向子组件添加一些组件，从而触发布局运行。还有多个孩子。事件是异步的。我可以在第一个事件触发器处使用suspendLayout，但如何判断哪一个是最终事件，以便在最后一个事件处使用resumeLayout（）。经过一天的尝试，我最终在容器级别添加了一个延迟100ms的delayTask，然后每次调用事件时，我都会调用一个函数来取消任务并重新启动它。因此，最后一个任务将执行Ext.resumealayouts（true）；我不确定是否有更好的解决方案。：）在这种情况下，您是否会在每次事件中调用服务器，并在返回时向容器添加组件？我假设如果你有异步事件，也许你可以使用承诺。（还有Ext.PROMITE和Ext.DEERTED）。。。在过去的一些情况下，我也不得不使用延迟的任务，因为有几个动作是相似的，我不知道最后一个动作被触发的频率和时间，所以我也不得不使用它。但这里的问题是，事件会将一些组件添加到子组件，从而触发布局运行。还有多个孩子。事件是异步的。我可以在第一个事件触发器处使用suspendLayout，但如何判断哪一个是最终事件，以便在最后一个事件处使用resumeLayout（）。经过一天的尝试，我最终在容器级别添加了一个延迟100ms的delayTask，然后每次调用事件时，我都会调用一个函数来取消任务并重新启动它。因此，最后一个任务将执行Ext.resumealayouts（true）；我不确定是否有更好的解决方案。：）在这种情况下，您是否会在每次事件中调用服务器，并在返回时向容器添加组件？我假设如果你有异步事件，也许你可以使用承诺。（还有Ext.PROMITE和Ext.DEERTED）。。。有时我在过去的案例中也不得不使用延迟任务，因为有几个动作是相似的，我不知道最后一个动作触发的频率和时间，所以我也不得不使用延迟任务。