2013-11-22 5 views
5

folgenden Fall Stellen Sie sich vor, in dem ich die folgende HTML-Dokument haben:Hat ExtJS automatisch Müll sammeln Komponenten

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

Jetzt irgendwo in meinem Code, ich ExtJS sagen ein Panel in meinem Platzhalter zu machen.

Etwas später beschließt ein anderer Teil des Codes, den Platzhalter div aus dem DOM zu entfernen.

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

In diesem Fall, was passiert mit dem Panel, das zuvor deklariert wurde? Muss ich es manuell zerstören, oder weiß ExtJS, dass das enthaltene Element gerade aus dem DOM entfernt wurde und das Panel selbst zerstören sollte? Ich benutze ExtJS 4.1.

Antwort

4

ExtJS zerstört Komponenten nicht automatisch, wenn Sie das enthaltene Element entfernen. Das Element wird aus dem DOM entfernt, aber das Panel behält seine Referenz bei. Versuchen Sie Folgendes:

Ext.select('.placeholderForExtPanel').first().remove(); 
console.log(Ext.getCmp('panel-id').getEl().dom.parentNode); // assuming your panel's id is "panel-id" 

Das Element existiert noch, und man konnte es nur wieder auf das DOM anhängen, wenn man wollte:

document.body.appendChild(Ext.getCmp('panel-id').getEl().dom.parentNode); 

(Randbemerkung: die Tatsache, dass die Platte die Referenz hält Das Element containing verhindert auch, dass der Garbage Collector des Browsers es zerstört)

Im Grunde funktioniert es umgekehrt, die Komponente verwaltet die entsprechenden DOM-Elemente. Wenn Sie also die Komponente zerstören, werden die DOM-Elemente ebenfalls entfernt.

Alle Komponenten, die andere Komponenten enthalten können (d. H. Ext.container.Container und alle Unterklassen), zerstören alle untergeordneten Komponenten, wenn sie zerstört werden

Also, wenn Sie alle Komponenten automatisch zu zerstören, die zu einem bestimmten Element gemacht worden sind, erstellen Sie einfach das Element als Container und Sie sollten gut sein:

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

Eigentlich ist die reson ich frage ist, weil ich ein ext.tree.Panel haben möchte, das als ein TreeGrid angeordnet ist, das bestimmten Zeilen erlaubt, willkürliche Komponenten innerhalb ihres verbundenen '' zu rendern. Das bedeutet, dass ich Komponenten instanziiere und sie zu diesem '' rendere. Leider scheint das Baumraster keine Ereignisse zu senden, wenn es entscheidet, dass es '' aus '

' hinzufügen oder entfernen muss, was mich davon abhält dieses Ereignis fangen und die Komponente zerstören. Ich hoffte also, dass Dinge automatisch passieren würden. Hast du eine Vorstellung davon, was ich tun könnte? – LordOfThePigs

+0

Ich habe versucht, die RowBody-Funktion oder das RowExpander-Plugin zu verwenden, aber beide sind hoffnungslos buggy mit einem Baumraster. – LordOfThePigs

+0

Sie können das Ereignis [refresh] (http://docs-origin.sencha.com/extjs/4.1.1/#!/api/Ext.tree.View-event-refresh) in der Ansicht abhören Wird ausgelöst, wenn die Rasteransicht die HTML-Struktur neu erstellt. Für das, was es wert ist, Komponenten in Rasterzeilen oder Zellen zu rendern, ist normalerweise eine schlechte Idee (ich war auch dort :)), da die Ansicht häufig aktualisiert werden kann (zB beim Sortieren) und möglicherweise viele Komponenten gerendert werden müssen Leistung erheblich verlangsamen. – matt