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

Question

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

我想继承现有的面板页眉等css配色方案。

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

如何执行以下操作：

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引用(如果它们存在的话)，否则结果实际上没有意义(并且您必须手动创建其他引用)。这是因为Extjs 4在css命名空间和类的技术意义上与Extjs 3的工作方式不同。您可以通过覆盖组件的组件类来手动更改组件正在使用的所有css类，但这是不值得的。如果没有大量的努力，你想要做的事情是不可能完成的，而且这是不值得的。