CODEWITHSUNDEEP
extjs4
Gopal Saini
Gopal Saini

Reputation: 41

How to scope the reset CSS so that is applied to Ext components using scopeResetCSS property?

How can I set Ext CSS to be just applied to Ext components?

This is what is mentioned in Ext documentation for scopeResetCSS:

scopeResetCSS : Boolean
True to scope the reset CSS to be just applied to Ext components. 
Note that this wraps root containers with an additional element. 
Also remember that when you turn on this option, you have to use ext-all-scoped 
{ unless you use the bootstrap.js to load your javascript, in which case it will be 
handled for you.

I have already set Ext.scopeResetCSS=true; & also Replaced the ext-all.css with ext-all-scoped.css, but that does not help.

Upvotes: 4

Views: 4447

Answers (2)

Shlomo
Shlomo

Reputation: 3990

For example, to get a scoped version the gray theme:

  1. install Compass

  2. Then, on command line, move to the ExtJs Sass folder e.g. /extjs/resources/sass

  3. duplicate the file ext-all-gray.scss

  4. add the line $scope-reset-css: true; at the top of the file.

Then run: compass compile ext-all-gray-scoped.scss

This will create a file ext-all-gray-scoped.css in the CSS folder which you can now use.

Upvotes: 2

Jugal Shah
Jugal Shah

Reputation: 3695

Thanks to Donald Sipe for posting the solution for this in his blog.

You should create Ext object in the following manner before it is loaded by ext-debug.js script:

 <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="js/libs/ext/4.0.2a/ext-all-debug.js"></script>

By setting the scopeResetCSS value in buildSettings config object, you are telling ExtJS that you are going to handle CSS scoping all by yourself.

Upvotes: 3

Related Questions