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

      0  

    Default


    My solution:

    PHP Code:

    Ext
    .onReady(function() {    
        
    //ext4 adds a custom classname to the body - remove it!    
        
    document.body.className '';
    }); 
    Management means doing the things right,
    Leadership means doing the right things.

    www.interpid.eu, www.webdbadmin.com

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

      1  

    Default


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

  3. #13
    Sencha Premium Member
    Join Date
    Jan 2013
    Posts
    42
    Vote Rating
    7
    mbingham is on a distinguished road

      0  

    Default


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