CODEWITHSUNDEEP
cssextjsextjs4extjs3
Awalias
Awalias

Reputation: 2127

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

Upvotes: 0

Views: 369

Answers (2)

Reimius
Reimius

Reputation: 5712

While this is technically possible to do, the results would not actually make sense unless you manually go through each component and override the classes to have the correct css references if they even exist (and you would have to create others manually). This is because Extjs 4 does not work the same way in a technical sense for css namespacing and classes as Extjs 3. You could manually change all the css classes the components are using by overriding their component classes, but this is just not worth the time. What you are trying to do can not be done without a huge amount of effort, and it is just not worth it.

Upvotes: 1

wantok
wantok

Reputation: 995

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(' '))

Upvotes: 1

Related Questions