ExtJS स्वचालित रूप से कचरा इकट्ठा घटकों

Question

कल्पना कीजिए निम्नलिखित मामले में, जहां मैं निम्नलिखित HTML दस्तावेज़ होता है।

var container = Ext.select('.placeholderForExtPanel'); 
Ext.create('Ext.form.Panel', { 
    title: 'My Panel' 
}); 

कुछ समय बाद, कोड के कुछ अन्य भाग डीओएम से प्लेसहोल्डर div को हटाने का निर्णय लेते हैं।

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

इस मामले में, पैनल के साथ क्या होता है जिसे पहले घोषित किया गया था? क्या मुझे इसे मैन्युअल रूप से नष्ट करने की ज़रूरत है, या क्या एक्स्टजेस जानता है कि इसमें तत्व शामिल है जिसे सिर्फ डीओएम से हटा दिया गया था और इसे पैनल को ही नष्ट कर देना चाहिए? मैं ExtJS 4.1 का उपयोग कर रहा हूँ।

Answer 1

यदि आप तत्व को हटाते हैं तो ExtJS स्वचालित रूप से घटकों को नष्ट नहीं करेगा। तत्व को डीओएम से हटा दिया जाएगा, लेकिन पैनल इसका संदर्भ रखता है। प्रयास करें निम्नलिखित:

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

तत्व अभी भी मौजूद है, और तुम सिर्फ फिर से डोम से संलग्न सकता है अगर आप:

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

(साइड नोट: तथ्य यह है कि पैनल संदर्भ रखता है इसमें तत्व शामिल होने से ब्राउजर के कचरा कलेक्टर को इसे नष्ट करने से भी बचाता है)

असल में यह अन्य तरीकों से काम करता है, घटक इसके संबंधित डीओएम तत्वों का प्रबंधन करता है, इसलिए जब आप घटक को नष्ट करते हैं तो डीओएम तत्व भी हटा दिए जाएंगे।

इसके अलावा, किसी भी घटक है जो अन्य घटकों को शामिल कर सकते हैं (अर्थात 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