Question

想象一下以下情况，我有以下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();

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

Answer 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

ExtJS是否自动垃圾收集组件

1 个答案: