ExtJS 是否自动垃圾收集组件答案

【问题标题】：Does ExtJS automatically garbage collect componentsExtJS 是否自动垃圾收集组件
【发布时间】：2013-12-07 05:28:46
【问题描述】：

想象以下情况，我有以下 HTML 文档：

<html>
    <head>... include all the js and css here...</head>
    <body>
        <div class="placeholderForExtPanel"></div>
    </body>
</html>

现在在我的代码中，我告诉 ExtJS 在我的占位符中呈现一个面板。

var container = Ext.select('.placeholderForExtPanel');
Ext.create('Ext.form.Panel', {
    title: 'My Panel'
});

稍后，代码的其他部分决定从 DOM 中删除占位符 div。

Ext.select('.placeholderForExtPanel').first().remove();

在这种情况下，之前声明的 Panel 会发生什么？我是否需要手动销毁它，或者 ExtJS 是否知道它的包含元素刚刚从 DOM 中删除，它应该自行销毁 Panel？我正在使用 ExtJS 4.1。

【问题讨论】：

标签： javascript extjs garbage-collection

【解决方案1】：

如果您删除包含元素，ExtJS 不会自动销毁组件。该元素将从 DOM 中删除，但面板保留对它的引用。请尝试以下操作：

Ext.select('.placeholderForExtPanel').first().remove();
console.log(Ext.getCmp('panel-id').getEl().dom.parentNode); // assuming your panel's id is "panel-id"

该元素仍然存在，如果您愿意，可以再次将其附加到 DOM：

document.body.appendChild(Ext.getCmp('panel-id').getEl().dom.parentNode);

（旁注：面板保留对其包含元素的引用这一事实也可以防止浏览器的垃圾收集器销毁它）

基本上它的工作方式是相反的，组件管理其对应的 DOM 元素，因此当您销毁组件时，DOM 元素也将被删除。

此外，任何可以包含其他组件（即Ext.container.Container 及其所有子类）的组件在销毁时都会销毁它们的任何子组件（假设autoDestroy 已启用，这是默认设置）。

所以，如果你想自动销毁已经渲染到某个元素的所有组件，只需将该元素创建为容器，你应该很好：

var container = Ext.create('Ext.container.Container', {
    cls: 'placeholderForExtPanel',
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'panel',
        title: 'mypanel'
    }]
});

container.destroy(); // destroys the container AND the panel

【讨论】：

实际上，我要问的原因是因为我希望将 ext.tree.Panel 安排为 TreeGrid，它允许某些行在其关联的 <tr> 内呈现任意组件。这意味着我正在实例化组件并将它们渲染到 <tr> 不幸的是，当它决定需要从 <table> 添加或删除那些 <tr> 时，树网格似乎没有发送事件，这阻止了我捕获此事件并销毁组件。所以我有点希望事情会自动发生。你知道我能做什么吗？
我尝试使用 RowBody 功能或 RowExpander 插件，但它们都在树形网格中出现了无可救药的问题。
您可以在视图上监听refresh 事件，因为每当网格视图重建 HTML 结构时都会触发该事件。对于它的价值，将组件渲染到网格行或单元格通常是个坏主意（我也去过那里:)）因为视图可以频繁刷新（例如在排序时）并且可能需要渲染很多组件，这将显着降低性能。
我刚刚捕获了 itemadd 和 itemremove 事件。这些似乎让我可以干净利落地做我需要的事情。