View Full Version : ExtJS, Salesforce, and the CSS blues

31 Mar 2011, 2:44 PM
I've been asked to demo some ExtJS UI enhancements to our current apps inside Salesforce. This is just a proof of concept that ExtJS will work as a good UI replacement for the default UI that most of our VisualForce pages use.

Everything works great, that is, except a few odds and ends of the CSS. There are lots of styles inside "...visual.force.com/sCSS/21.0/sprites/13013.../Theme3/default" that are messing with the ExtJS elements. Specifically commmon.css and extended.css. Here's an example:


body .x-date-middle, .x-date-left, .x-date-right {
background: none repeat scroll 0 0 transparent;

Result on ExtJS DateMenu:


How It Should Look:


I realize that lots of Salesforce's UI uses ExtJS (their code editor for example). So, I wasn't really surprised when I started seeing these little hiccups. Is there an elegant way around this, or is ExtJS just not going to play well inside of Salesforce?

For example: Is there a way that I can tell my VisualForce page to ignore commmon.css and extended.css? Can I tell ExtJS's CSS to go grab Salesforce's CSS and drag it into the corner, put a pointy hat on it, and tell it to be quiet?

I've heard tell that "customizing the global Ext.baseCSSPrefix config" will solve my problem in ExtJS 4. Is this true? I can see how adding a prefix to all the ExtJS classes would help in most instances, assuming they're not putting the styles on things like <li> and <td>...

reference (http://stackoverflow.com/questions/5506973/css-salesforce-extjs-and-the-blues)