x-body applied even with scopeResetCss = true

**Broonix** · 5 Jun 2012 8:02 AM

I'm trying to upgrade from 4.0.1 to 4.0.7 or 4.1.0. In 4.0.1 using scopeResetCss = true caused ExtJs to not apply x-body to the body tag of my HTML.

When I upgrade this is applied and overrides all the CSS I already have.

Is there anyway to disable this from happening? even ext-all-scoped.css has this issue.

I'm loading ext as follows:

Code:

<script type="text/javascript" src="/scripts/ext-4.0.7/ext-all.js"></script>
    <script type="text/javascript">
        Ext.scopeResetCSS = true;
    </script>

I also tried:

Code:

<script>Ext = {buildSettings:{"scopeResetCSS": true }};</script>
<script type="text/javascript" src="/scripts/ext-4.0.7/ext-all.js"></script>

**scottmartin** · 11 Jun 2012 11:04 AM

Try using: extjs/resources/css/ext-all-scoped.css

Scott.

**Greendrake** · 7 Aug 2012 5:29 PM

Bump!
This worked in 4.0.x
I now want to embed an ExtJS widget in an old website and I get CSS styles screwed up because x-body class gets applied to BODY.

**arthurakay** · 8 Aug 2012 12:56 PM

Can anyone confirm the last version of ExtJS in which this actually works as expected?

The earliest version I have is 4.0.4, and it doesn't work. Having that knowledge will help me track down the issue (or explanation).

**Greendrake** · 9 Aug 2012 5:03 AM

I've just checked an existing application written on version 4.0.7 where scoped CSS seemingly works, but I still see x-body class applied to BODY. For some lucky reason it did not screw up styles in that particular application which made me think that x-body wasn't there.

That makes me think that there was probably never an ExtJS version where x-classes were not applied to BODY and HTML when using CSS scoping

.

**arthurakay** · 9 Aug 2012 6:54 AM

Originally Posted by Greendrake

That makes me think that there was probably never an ExtJS version where x-classes were not applied to BODY and HTML when using CSS scoping

.

That's what I was wondering about.

As far back as I can see, that looks to be the case.

For some lucky reason it did not screw up styles in that particular application which made me think that x-body wasn't there.

Can you elaborate more on the specific styles that are causing issues? As in components/layouts that are not acting as you believe they should in a scoped CSS environment?

**winkelmann** · 18 Sep 2012 1:30 AM

Ran into the same issue today.
The problem hardly causes problems when within a component layout. But we use the scopeResetCss option to be able to create windows and other components on top of an existing website to display movable administrative tools. With x-body applied in some cases (where we do not explicitly set the attributes in the sites styles) the x-body definition with font-family, font-size and color specified break our original site layout.
I guess a working fix would be to move the styles from x-body to x-reset, since x-reset is created around all components anyway.

**EmmaG** · 13 Nov 2012 10:18 AM

Sorry to necro the thread but I have the same issue. I'm trying to use ExtJS in an existing page so I don't want x-body or any other classes applied to the <body> tag.

Here's the header code:

HTML Code:

    <!--Ext and ux styles -->
    <link href="../nmf/javascript/extjs-4.1.0/resources/css/ext-all-scoped-debug.css" rel="styleshet" type="text/css" />

    <!--Ext 4 includes-->
    <script>
        // Here we define Ext for the first time
        Ext = {
            buildSettings:{
                "scopeResetCSS": true  // Thanks, but I'll do my own scoping please
            }
        };
    </script>
    
    <script src="../nmf/javascript/extjs-4.1.0/ext-all-debug-w-comments.js" type="text/javascript"></script>
    <script>
        Ext.onReady(function() {
            Ext.fly(Ext.getBody().dom.parentNode).removeCls('x-body');
        });
    </script>

and here's what the page source looks like:

HTML Code:

<body id="ext-gen1018" class="x-body x-gecko">

As you can see I've tried all the suggestions so far, and the classes are still there. Does anyone have any explanation as to what scopeResetCss is actually for if not for getting rid of the body class?

Thanks, Emma

**Greendrake** · 2 Dec 2012 4:54 AM

Originally Posted by winkelmann

I guess a working fix would be to move the styles from x-body to x-reset, since x-reset is created around all components anyway.

Thanks for the suggestion, worked for me! There was only ONE occurrence of "x-body" in ext-all-scoped.css, and replacing it with "x-reset" has done the trick.

To Sencha: WTF ExtJS CSS classes do in body html element when using Ext.scopeResetCSS = true ?

**klodoma1** · 7 Feb 2013 10:20 PM

Any update on this one?

I agree with the previous post: what does a JS library has to write something in the BODY of the page!?
By default this kind of functionality should be disabled and enabled on request not the other way around.

x-body applied even with scopeResetCss = true

Thread Tools

Search Thread

Display

Unanswered: x-body applied even with scopeResetCss = true

Unanswered: x-body applied even with scopeResetCss = true