Search code examples
cssextjsextjs4extjs3

Inheriting CSS from existing styles. Extjs4 Sandbox

I have managed to embed my extjs4 panel inside an existing extjs3 application.

I want to inherit the existing css colour schemes for panel headers etc.

But my extjs4 components are 'sandboxed', therefore using the .x4-* namespace for css.

How can:

my-styles.css

.x4-tab { some-stuff }

inherit from:

existing-styles.css 

.x-tab { foo: #FFF }

Is this possible? cheers

Solution

  • You can grab all the existing css rules that have '.x-' in the selector and create new rules using '.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(' '))