Уничтожение компонентов Ext внутри элемента div

Question

У меня есть компонент Ext.Component, который отображается внутри div через свойство renderTo. У меня нет других ссылок на этот компонент, кроме элемента DOM, где он отображается.

Если я сейчас просто удаляю этот элемент из DOM, проблема в том, что будут сохраняться элементы, которые сохраняются (т. Е. Mask-Element с классом «x-mask»).

Можно ли удалить и уничтожить все компоненты Ext.Components в DIV чистым способом, чтобы не осталось элементов, связанных с ними?

Альтернативный способ: сначала найти все компоненты Ext.Components, которые будут переданы этому div, а затем удалить их самостоятельно.

Answer 1

Если у вас действительно нет ссылки на компонент (даже идентификатор), вам необходимо будет проверить ваши дочерние элементы DOM, если они принадлежат к компоненту.

Пример:

var childNodes = document.getElementById('your-dom-element').childNodes; 
for (var i = childNodes.length-1, cmp; i >= 0; i--) { 
    cmp = Ext.getCmp(childNodes[i].id); 
    if (cmp) { 
     cmp.destroy(); 
    } 
} 

ExtJS всегда обеспечивает id для компонента (если он не указан вами, он будет генерировать один) и использует его в качестве атрибута идентификатор для компонентов, лежащих в основе DOM элемента ,

Поэтому вы можете просто пройти через дочерние узлы элементов DOM (direct) и проверить, есть ли компонент, связанный с идентификатором дочернего узла. Если он найден, вы можете вызвать destroy, который позаботится об уничтожении компонента (и всех дочерних компонентов) в DOM.

Answer 2

Вам необходимо (и вы должны всегда) уничтожить сам компонент, вызвав destroy(); на уровне компонента. Если у вас есть элемент DOM, у вас будет доступ к id. При том, что делать

Ext.getCmp('cmpIdValue').destroy(); 

Компонент должен заботиться о разрушении DOM элемента и в дополнение очистке любых управляемых слушателей.