Geek Answers Handbook

How to embrace CSS reset that applies to Ext components using the scopeResetCSS property?

How to install Ext CSS for Ext applications only?

This is what the Ext documentation mentions 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 already set Ext.scopeResetCSS=true; , and also replaced ext-all.css with ext-all-scoped.css , but that doesn't help.

+4
source share
2 answers

Thanks to Donald Sipe for posting the solution on this blog.

You must create an Ext object as follows before the ext-debug.js script ext-debug.js :

  <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 the buildSettings config object, you tell ExtJS that you will handle the CSS yourself.

+3
source

For example, to get an extended version of a gray theme:

  • install compass

  • Then, on the command line, go to the ExtJs Sass folder, for example. /extjs/resources/sass

  • duplicate ext-all-gray.scss

  • add the line $scope-reset-css: true; to the beginning of the file.

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

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

+2
source

More articles:


All Articles