PDA

View Full Version : 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:


<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:


<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 :D.

arthurakay
9 Aug 2012, 6:54 AM
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 :D.

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:

<!--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:

<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
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.

klodoma1
9 Feb 2013, 6:30 AM
My solution:




Ext.onReady(function() {
//ext4 adds a custom classname to the body - remove it!
document.body.className = '';
});

winkelmann
8 Aug 2013, 10:50 PM
So, I recently switched jobs and at my new company we're having the same problem, even with ExtJS 4.2: x-body is applied to the body and it contains styles that mess with the markup of the site that we're developing the application on top of.
Since we're using Sencha Cmd for this, I decided to comment out the x-body definition in the sass sources. For anyone using a Sencha Cmd setup this may be the way to go. The problematic code is located in

ext-theme-neutral/sass/src/Component.scss

You will have to redo this with every updated ExtJS-version though, after sencha app upgrade that is.

Another option would be to create a custom theme and override the component class. That is, if there is a way to unset previously specified class definitions in Sass.

Just posting this here to provide another solution for anyone running into the problem. I will also be posting this on the ExtJS bugs forum.

mbingham
11 Aug 2013, 1:08 PM
The host platform on which my application lives has some body styles which contend with those applied by x-body.

Thanks for posting your ideas @winkelmann, I'm having similar qualms about how to remove them. I've explored these avenues:

use Ext.buildSettings.scopeResetCSS (non-starter, this is absent in Sencha Ext 4.2.1)


null out the properties on the .#{$prefix}body class in my theme's SASS (non-starter, SASS is additive and merges neither selectors nor properties from inherited themes)


modify ext/packages/ext-theme-neutral/sass/src/Component.scss (most desirable solution, but maybe slightly naughty as it's unpackageable and modifies the SDK in the application folder)


drop the class upon application launch via Ext.getBody().removeCls(Ext.baseCSSPrefix + 'body') (causes an undesirable flash of ext-reset and risks breaking CSS or JS that depends on the presence of the x-body class)


But I ended up going a different route to avoid messing with the SDK folder. This workaround adds an -after-sass target which suffixes the generated classes, preventing them applying to the body element:


<target name="-after-sass">
<foreach target="suffix-body-classes" param="input">
<path>
<fileset dir="${build.dir}/resources/" includes="*.css" />
</path>
</foreach>
</target>

<target name="suffix-body-classes">
<echo>Suffixing body classes in ${input}</echo>
<replaceregexp file="${input}"
match="\.[^\s\-]+\-body\s?\{"
flags="g"
replace="f-body-buildxml {"
/>
</target>


I also feel there's a case for a feature request: can we introduce an $include-body-styles variable in ext/packages/ext-theme-base/sass/var/Component.scss so that we can opt-out?