使用 Sencha ExtJS 自定义现有网站或进行混搭答案

【问题标题】：Using Sencha ExtJS to customise an existing website or do a mashup使用 Sencha ExtJS 自定义现有网站或进行混搭
【发布时间】：2015-04-29 03:05:03
【问题描述】：

我正在使用 ExtJS 4.2.1 向我无法控制设计的网站添加自定义项。您可以认为这就像将 ExtJS 组件作为混搭添加到另一个页面。

问题在于，当 ExtJS 启动时，它会将 CSS 类（例如 x-body）添加到 DOM 的

元素中，这会影响页面上的所有其他内容。我需要能够阻止它这样做，同时仍然允许它在 ExtJS 容器上生效。

我知道我可以使用 IFrame 来包含我的 ExtJS 自定义并将其与页面的 DOM 隔离，但我发现 IFrame 的性能问题，甚至在 Firefox 和 IE 中呈现问题，因此需要不同的解决方案。

【问题讨论】：

标签： extjs mashup

【解决方案1】：

在 ExtJS 4.0.2 中，如果你设置了 scopeResetCSS:true，魔法就会发生，但在 ExtJS 4.2.1 中我找不到该选项。

我猜你有几个丑陋的选择：

从 ExtJS 样式表中删除样式（一项冗长而无聊的工作）
使用 Ext.Element 和 removeClass 函数手动从每个元素中删除类http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dom.Element-method-removeCls

【讨论】：

感谢@Aguardientico。我对您的回答投了赞成票，因为它使我朝着正确的方向前进。我已经按照您的选项 2 发布了我自己的解决方案。

【解决方案2】：

在 Aguardientico 的回答提示下进一步研究后，我发现使用 Sass 可以做到这一点，如 here 所述，但是我不想重建 ExtJS CSS，所以我添加了一些代码在运行时执行它如下：

var body = Ext.getBody();
// Remove the x-body cls from the body element
body.removeCls("x-body");
// Add x-body cls to any existing top-level ExtJs divs
body.select('>div').each(function(el) {
    if (el.hasCls("x-border-box")) {
        el.addCls("x-body");
    }
});
body.on("DOMNodeInserted", function(e, node) {
    // Add x-body cls to top-level ExtJs divs as they are created
    if (node.parentNode === body.dom) {
        if (Ext.fly(node).hasCls("x-border-box")) {
            Ext.fly(node).addCls("x-body");
        }
    }
});

这个想法是从 body 元素中删除 x-body 并将其添加回由 ExtJS 创建的任何 div 作为 body 的直接子级。因为 ExtJS 会根据需要添加新的 div，例如对于选择列表，还需要注意它们是使用 DOMNodeInserted 事件创建的。

我在我的应用程序的launch 处理程序中调用此代码，但它也可以在Ext.onReady 处理程序的开头。

编辑： 我的 ExtJS 应用程序位于一个容器中，该容器呈现给 body 元素，如下所示：

Ext.create("Ext.container.Container", {
    renderTo: Ext.getBody(),
    ...
});

但如果您渲染到另一个 DIV，您还需要将 x-body 类显式添加到您的自定义容器中，如下所示：

Ext.create("Ext.container.Container", {
    renderTo: "SomeOtherDiv",
    cls: "x-body",
    ...
});

【讨论】：