从现有样式继承CSS。 Extjs4 Sandbox

Question

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

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

但我的extjs4组件是'沙盒'，因此使用.x4- *命名空间用于css。

怎么可能：

my-styles.css

.x4-tab { some-stuff }

继承自：

existing-styles.css 

.x-tab { foo: #FFF }

这可能吗？欢呼声

Answer 1

您可以获取选择器中包含“.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(' '))

Answer 2

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