PDA

View Full Version : using Ext in an exisiting page gives CSS problems



daanlib
6 Sep 2010, 3:00 AM
I am having some trouble using Ext in an existing page. In this page I use an Ext.Window, containing an Ext.TreePanel and an Ext.FormPanel, but it really doesn't matter what components I use. The problem is that the existing css on this page makes Ext look terrible and conversely does the css in Ext make my page look bad.

The problem lies in the usage of the blueprint CSS library (www.blueprintcss.org) and in particular the css reset. My question here is: does anyone reading this have any experience using blueprint (or another CSS library) with Ext?

Condor
6 Sep 2010, 3:09 AM
Is there any way you could use the blueprint css in a separate frame or iframe?

daanlib
6 Sep 2010, 3:22 AM
That is not really an option. The problem here is that I use an Ext window to edit the page contents without leaving the page for a separate "administration page". I've managed to make things work a little in Firefox by editing the blueprint css file and "namespacing" all css selectors (by making them only work in an element with a certain class name) and some editing in ext-all.css to prevent collision.

I guess the real problem here is that there should be a way to make ExtJS CSS only affect elements created by the Ext library and make the library not (or less) vulnerable to existing styles on the page. The way it is now makes it hard to incorporate Ext in a "normal" page.

Condor
6 Sep 2010, 3:29 AM
I completely agree.

Ext 4 does improve on this somewhat, but it still performs an unscoped HTML reset.

daanlib
6 Sep 2010, 6:17 AM
Do you know in what way Ext 4 will improve on this subject? Any help on making Ext work properly within existing pages would be greatly appreciated.

Condor
6 Sep 2010, 6:21 AM
Ext 4 uses scss to build the css, which means that you can easily change the entire theme without having to go through all css rules.

As part of the move to scss the current css is being examined and cleaned.

emily
14 Sep 2010, 7:53 AM
This is starting to annoy me too! I using extjs for a onebox module for our google search appliance and trying to figure out how to not apply the extjs CSS to the whole page (making margins 0 is the main issue).

When is it likely that extjs 4 will be released?

In the mean time does anyone have any ideas about how I can create some kind of namespace or something for the extjs CSS?

dawesi
28 Jul 2011, 4:44 PM
I agree. A javascript framework shouldn't interfere with CSS frameworks. This should be included in the testing phase, especially common CSS frameworks like blueprint.

It's like Sencha writing server-side code in order to use ExtJS, it would be out of scope.

So what is Sencha going to do about this?