css - 从现有样式继承 CSS。Extjs4 沙盒

Question

我设法将我的 extjs4 面板嵌入到现有的 extjs3 应用程序中。

我想继承面板标题等现有的 css 颜色方案。

但是我的 extjs4 组件是“沙盒化”的，因此使用 .x4-* 命名空间作为 css。

怎么能：

my-styles.css

.x4-tab { some-stuff }

继承自：

existing-styles.css 

.x-tab { foo: #FFF }

这可能吗？干杯

Answer 1

虽然这在技术上是可行的，但结果实际上没有意义，除非您手动遍历每个组件并覆盖类以拥有正确的 css 引用（如果它们甚至存在）（并且您必须手动创建其他引用）。这是因为 Extjs 4 在 css 命名空间和类的技术意义上与 Extjs 3 的工作方式不同。您可以通过覆盖组件类来手动更改组件正在使用的所有 css 类，但这不值得花时间. 如果没有大量的努力，你想要做的事情是无法完成的，这是不值得的。

Answer 2

您可以获取选择器中包含“.x-”的所有现有 css 规则，并使用“.x4-”创建新规则。

var newRules = [];
Ext.Object.each(Ext.util.CSS.getRules(), function(selector, rule) {
    if (/\.x-/.test(selector)) {
        newRules.push(rule.cssText.replace(/\.x-/g, '.x4-');
    }
});

Ext.util.CSS.createStyleSheet(newRules.join(' '))