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

想象下面的情况,我有以下的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中删除,它应该自行销毁面板? 我正在使用ExtJS 4.1。





garbage-collection