2013-11-22 13 views
5

想象一下下面的情況,在那裏我有以下的HTML文檔:是否ExtJS的自動垃圾收集組件

<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。如果您刪除包含元素

回答

4

的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 
+0

其實,振振有辭我問是因爲我想將ext.tree.Panel排列爲TreeGrid,它允許某些行在其關聯的''內部呈現任意組件。這意味着我實例化的組件,並將它們呈現給'' unforetunately,樹格似乎沒有發送事件,當它決定了它需要添加或刪除那些''從''

,它阻止我捕獲此事件並銷燬組件。所以我很希望事情會自動發生。你知道我能做什麼嗎? – LordOfThePigs

+0

我嘗試使用RowBody功能或RowExpander插件,但它們都是絕望的樹形網格。 – LordOfThePigs

+0

你可以聽視圖上的[刷新](http://docs-origin.sencha.com/extjs/4.1.1/#!/api/Ext.tree.View-event-refresh)事件,因爲這將在網格視圖重建HTML結構時觸發。對於什麼是值得的,渲染組件到網格行或單元格通常是個壞主意(我也在那裏:)),因爲視圖可以頻繁刷新(例如在排序時),並且可能需要渲染很多組件,這將會顯着減慢性能。 – matt