Javascript ExtJS是否自动垃圾收集组件_Javascript_Extjs_Garbage Collection

Javascript ExtJS是否自动垃圾收集组件

javascript extjs

Javascript ExtJS是否自动垃圾收集组件,javascript,extjs,garbage-collection,Javascript,Extjs,Garbage Collection,想象一下以下情况，我有以下HTML文档： <html> <head>... include all the js and css here...</head> <body> <div class="placeholderForExtPanel"></div> </body> </html> 稍后，代码的其他部分决定从DOM中删除占位符div Ext.selec

想象一下以下情况，我有以下HTML文档：

<html>
    <head>... include all the js and css here...</head>
    <body>
        <div class="placeholderForExtPanel"></div>
    </body>
</html>

稍后，代码的其他部分决定从DOM中删除占位符div

Ext.select('.placeholderForExtPanel').first().remove();

在这种情况下，以前声明的面板会发生什么情况？我是否需要手动销毁它，或者ExtJS是否知道它包含的元素刚刚从DOM中删除，它应该自己销毁面板？我使用的是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元素也将被删除

此外，任何可以包含其他组件（即及其所有子类）的组件在销毁时都会销毁其任何子组件（假设已启用，这是默认设置）

因此，如果您想自动销毁已渲染到某个元素的所有组件，只需将该元素创建为容器，您就可以：

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

事实上，我问的原因是因为我想把ext.tree.Panel安排成一个TreeGrid，允许某些行在其关联的

中呈现任意组件。这意味着我正在实例化组件并将它们呈现给该

不幸的是，当树网格决定需要从

中添加或删除这些

时，它似乎没有发送事件，这会阻止我捕获此事件并销毁组件。所以我希望事情会自动发生。你知道我能做什么吗？我试过使用RowBody功能，或者RowExpander插件，但是它们都是一个无望的树状网格。你可以在视图上监听事件，因为每当网格视图重建HTML结构时都会触发该事件。值得一提的是，将组件渲染到网格行或单元格通常不是一个好主意（我也去过：），因为视图可能会频繁刷新（例如排序），并且可能需要渲染很多组件，这将显著降低性能。我刚刚捕获了itemadd和itemremove事件。这些似乎让我干净利落地做了我需要的事情。

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