javascript – ExtJS是否自动垃圾收集组件

想象一下以下情况,我有以下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.

最佳答案

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