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.

回答1:

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.

回答2:

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

install Compass
Then, on command line, move to the ExtJs Sass folder e.g. /extjs/resources/sass
duplicate the file ext-all-gray.scss
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.

来源：https://stackoverflow.com/questions/6435833/how-to-scope-the-reset-css-so-that-is-applied-to-ext-components-using-scopereset

标签

extjs4