0

Like this question (and answer) suggest, I currently remove a few ExtJs "injected" css classes by including this in my Ext.application block:

Ext.application({
    launch : function() {
        ...
        Ext.getBody().removeCls('x-nbr');
        ...
    }

});

ExtJs adds the 'x-nbr' class to the body tag when Internet Explorer 8 is used (this overrides lots of CSS that ruins my page).

But what other classes does it add? How how do I remove ALL the styles that ExtJs adds when IE renders my page?

EDIT

I have found a duplicate question here, but the (at the time of this writing) 2 answers provided are insufficient. I cannot change the value of scopeResetCSS in ext-all.js as that file is shared across multiple applications. I need a fix for my application specifically.

Community
  • 1
  • 1
Josh
  • 1,309
  • 2
  • 17
  • 37

2 Answers2

1

'br' in 'x-nbr' means 'border radius' for Ext source code. So 'nbr' would mean no support for border-radius.

another class that is added is 'x-nlg'. 'x-' is just the prefix for all the framework classes.

'lg' in 'x-nlg' means 'linear gradiend', so again 'nlg' would mean no support for linear gradient.

Ext.EventManager (for v. 4.2) declares an internal function called initExtCss. I suggest you take a look at it. Will give you an example of what is added into the body dom element based on framework environment booleans like Ext.isIE8.

Juan Daniel Flores
  • 277
  • 1
  • 10
1

Instead of removing the css, you can override it with your own style.

You can include your own css files. By using the id attribute of the particular component you can override its css properties.

ccjmne
  • 9,333
  • 3
  • 47
  • 62
babu
  • 11
  • 2