1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    Broonix is on a distinguished road

      0  

    Default Unanswered: x-body applied even with scopeResetCss = true

    Unanswered: x-body applied even with scopeResetCss = true


    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>

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,866
    Answers
    652
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Scott.

  3. #3
    Ext JS Premium Member
    Join Date
    Jul 2008
    Location
    New Zealand
    Posts
    91
    Vote Rating
    3
    Greendrake is on a distinguished road

      0  

    Exclamation


    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.

  4. #4
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,347
    Answers
    60
    Vote Rating
    32
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      1  

    Default


    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).
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  5. #5
    Ext JS Premium Member
    Join Date
    Jul 2008
    Location
    New Zealand
    Posts
    91
    Vote Rating
    3
    Greendrake is on a distinguished road

      0  

    Default


    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 .

  6. #6
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,347
    Answers
    60
    Vote Rating
    32
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    Quote Originally Posted by Greendrake View Post
    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?
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  7. #7
    Ext JS Premium Member
    Join Date
    Dec 2010
    Location
    Hamburg, Germany
    Posts
    193
    Answers
    1
    Vote Rating
    7
    winkelmann will become famous soon enough

      0  

    Default


    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.

  8. #8
    Ext JS Premium Member
    Join Date
    Jan 2012
    Posts
    1
    Vote Rating
    0
    EmmaG is on a distinguished road

      0  

    Default


    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

  9. #9
    Ext JS Premium Member
    Join Date
    Jul 2008
    Location
    New Zealand
    Posts
    91
    Vote Rating
    3
    Greendrake is on a distinguished road

      0  

    Default


    Quote Originally Posted by winkelmann View Post
    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 ?

  10. #10
    Sencha User
    Join Date
    Sep 2008
    Posts
    74
    Answers
    1
    Vote Rating
    2
    klodoma1 will become famous soon enough

      0  

    Default


    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.
    Management means doing the things right,
    Leadership means doing the right things.

    www.interpid.eu, www.webdbadmin.com