在div元素中销毁Ext Components

Question

我有一个Ext.Component，它通过“renderTo”属性在div中呈现。除了呈现它的DOM元素之外，我没有对该组件的任何其他引用。

如果我现在只是从DOM中删除这个元素，问题是会有一些元素持续存在（即Mask-Element和“x-mask”类）。

是否可以以干净的方式删除和销毁DIV中的所有Ext.Components，以便不会留下与它们相关的元素？

另一种方法是首先找到渲染到这个div的所有Ext.Components，然后自己删除它们。

Answer 1

您需要（并且应该始终）通过在组件级别调用destroy();来销毁组件本身。如果您拥有DOM元素，则可以访问id。做那个

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

组件应该负责销毁DOM元素，并且还会清理所有托管侦听器。

Answer 2

如果你真的没有引用该组件（甚至不是id），你需要检查你的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元素底层组件的id属性。

因此，您可以浏览DOM元素（直接）子节点，并测试是否存在与子节点的id相关联的组件。如果找到一个，你可以调用destroy，它将负责破坏DOM中的组件（和所有子组件）。