ExtJS是否会自动垃圾回收组件？

Question

ExtJS是否会自动垃圾回收组件？

5

假设有一个如下的场景，我有一个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。

- LordOfThePigs

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- matt · Accepted Answer

如果您删除包含元素，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