Lor*_*igs 5 javascript garbage-collection extjs
想象一下以下情况,我有以下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.
如果删除包含元素，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