javascript - EXTJS - 在选项卡面板中的选项卡中导航时如何保持 DOM 更轻？

Question

我有一个 extjs >4 应用程序，它使用选项卡面板作为菜单。每个选项卡下都有内容(包括容器等的 View )。

我注意到 extjs 可以正确处理 DOM，并且不会渲染我的应用程序拥有的所有内容。它仅呈现事件选项卡。

例如

       Ext.query('*').length = 805 //tab1
       Ext.query('*').length = 1052 //tab2
       Ext.query('*').length = 900 //tab3

我可以看到这一点，因为我保留了状态。因此，在我刷新页面后，最后一个激活的选项卡将被激活。然而，在我浏览选项卡后，DOM 变得更重。 Ext.query('*') 变为

      Ext.query('*').length = 5500//example

这是我的问题。

如何在选项卡中导航时保持 DOM 更轻？

最好的解决方案是保持启动状态。例如，当激活 tab1 时仅保留与 tab1 相关的人员，当激活 tab2 时仅保留与 tab2 相关的人员等等，就像我刷新页面时一样。

Answer 1

首先，你需要deferredRender:true 。它默认为 true，只需验证您没有更改它即可。

然后，您可以看到this example了解如何保持选项卡面板的状态(activeTab)。

这应该会有所帮助，因为恢复状态在选项卡面板及其选项卡呈现之前运行，因此与 deferredRender 一起，它最终应该只呈现事件选项卡。