View Full Version : [CLOSED] Common CSS Frameworks are reset by ExtJS

28 Jul 2011, 5:06 PM
Common CSS frameworks such as Blueprint are reset by the ExtJs style reset. As ExtJS is not a CSS framework commonly used on front-ends, Sencha should either 1) provide alternate stylesheets, or 2) detect common frameworks and remove ExtJS styles that interfere with the CSS framework, 3) provide extra style classes in components to deal with the differences.

Can ExtJS be tested with the more common CSS frameworks so that they can work well together 'out-of-the-box'.

Sencha already does this with javascript scopes, and should play well with others with css.

29 Jul 2011, 6:33 AM

I have the same problem.
I am not using extjs in all pages. When integrated, it destroys my layout.

Did you find a solution?

There are many css files in the extjs package:


What are the differences between them?


29 Jul 2011, 5:55 PM
You can already do this by using the ext-all-scoped.css file, which scopes all CSS styling provided by Ext JS. You will need to build a custom version of ExtJS for this to work using the "scopeResetCSS" build setting.


ext-all-access.css - accessibility theme
ext-all-scoped.css - scoped Ext JS styling (as mentioned above
ext-all.css - Default styling
ext-ie-scoped.css - scoped Ext JS styling, including only IE styles
ext-ie.css - IE only styling
ext-sandbox.css - Scoped CSS + the base CSS prefix has been changed from x- to x4- (for sandboxing)
ext-standard-scoped.css - No legacy browser support (IE), and scoped
ext-standard.css - No legacy browser support

30 Jul 2011, 10:33 AM

I donít understand your solution.
What is the ext-all-scoped.css suppose to do ?
What is the scope of this css file.

Including ext*.css bring styles not related to components like

list-style: none outside none; in ext-all-gray.css.

How are we suppose to handle this ?

Also what script are talking about ?
I know that we can generate custom styled css but this wonít solve the problem.


1 Aug 2011, 9:34 AM

There is a reset.css (http://docs.sencha.com/ext-js/4-0/resources/css/reset.css) in the document page.

Is it the same reset that is include in the extjs-all.css ?
Where can we get an uncompressed version of extjs-all.css ?


16 Aug 2011, 7:33 AM
Thanks, rdougan. That worked for me.

For others who are still confused, you can just set scopeResetCSS property to true as in:

Ext.scopeResetCSS = true;

Ext.onReady(function() {


Hope that clarifies.

9 Jul 2013, 2:44 AM
Wow, it's been a long time since 2011... worked for Sencha even, now back kickin' it in business again.

In case someone comes across this. ExtJS 4.2 no longer has a scoped stylesheet, as most of the resets have been removed. So if you're looking for it in the newer versions, it's not there ;-) and you can tweak anything else using sass.