PDA

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



dawesi
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.

spcmdr
29 Jul 2011, 6:33 AM
Hi

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:

ext-all-access.css
ext-all-scoped.css
ext-all.css
ext-ie-scoped.css
ext-ie.css
ext-sandbox.css
ext-standard-scoped.css
ext-standard.css


What are the differences between them?

Regards

rdougan
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.

@spcmdr


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

spcmdr
30 Jul 2011, 10:33 AM
Hi

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.

Regards

spcmdr
1 Aug 2011, 9:34 AM
Hi

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 ?

Regards

clayjar
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() {
Ext.QuickTips.init();

...
...
...
});

Hope that clarifies.

dawesi
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.