0

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

问题是，当 ExtJS 启动时，它会将 CSS 类（例如x-body）添加到 DOM 的 <body> 元素中，这会影响页面上的所有其他内容。我需要能够阻止它这样做，同时仍然允许它在 ExtJS 容器上生效。

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

4

2 回答 2

1

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

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

  1. 从 ExtJS 样式表中删除样式（一项漫长而无聊的工作）
  2. 使用 Ext.Element 和 removeClass 函数手动从每个元素中删除类http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dom.Element-method-removeCls
于 2015-04-29T03:30:15.733 回答
0

经过进一步研究，由 Aguardientico 的回答提示，我发现可以使用 Sass 来执行此操作，如此处所述但是我不想重建 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",
    ...
});
于 2015-04-29T04:24:00.437 回答