Question

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

问题在于，当ExtJS启动时，它会向＆lt; body＆gt;添加CSS类，例如 x-body 。 DOM的元素，这会影响页面上的其他内容。我需要能够阻止它执行此操作，同时仍然允许它在ExtJS容器上生效。

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

Answer 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中手动删除该类

Answer 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作为正文的直接子元素。因为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", ... });

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

2 个答案: