PDA

View Full Version : [Workaround found]Extjs adds class 'ext-gecko' to body causes problems



altamirador
17 Aug 2009, 5:09 AM
Hi guys !

Don't know if this should be reported has a bug or not...

I have setup a Wordpress website and I'd like to be able to integrate Extjs 3.0 in it.

I have installed the usual "includes" at the top of my website and I have noticed that, depending where I am in the website (home page or article viewing), ExtJS adds the "ext-gecko" and "ext-gecko3" to the body.

This happens in FF and IE 6,7 ??

This causes the home page to be misaligned (left justified).

I tried to use this script but it throws an error on all platform:


$('html,body').removeClassName('ext-gecko');I know this has to do with browser detection but what could cause this to happen ?

Any ideas ?

Help appreciated !

Animal
17 Aug 2009, 5:13 AM
It doesn't do that on my IE8 when I have it in IE7 emulation mode.

It adds ''ext-ie ext-ie7" to the <body>

altamirador
17 Aug 2009, 5:17 AM
Boy you are fast on the gun ! Thanks Animal !

But...What should I conclude ? I'm tempted to hot plug the code and remove the part where it adds this class altogether ?

Should we rate this as a bug ?

Altamirador

altamirador
17 Aug 2009, 5:21 AM
You re right, it does'nt do that in IE8 and in emulation...

But I still get this in FF, yet it's not a problem but in IE6 it does create the misalignment...

Altamirador

BitPoet
17 Aug 2009, 6:13 AM
Are you by any chance including a third party javascript library that makes Ext's browser detection stumble?

altamirador
17 Aug 2009, 8:22 AM
I'm not doing anything fancy. Besides Extjs, I'm loading Prototype 1.6 ! Here's my includes:


<script type="text/javascript" src="proto/prototype-1.6.0.3.js"></script>
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

Haven't tried to load Proto after Ext. This is the order I picked up from the documentation.

Anyhow, I've came up with a simple fix:

Added id 'mybody' to 'body' tag.


Ext.onReady(function () {

if ($('mybody').hasClassName('ext-gecko')) {
$('mybody').removeClassName('ext-gecko');
};
if ($('mybody').hasClassName('ext-gecko3')) {
$('mybody').removeClassName('ext-gecko3');
};


})


Might not be elegant, but it works !

Altamirador

tryanDLS
19 Aug 2009, 10:10 AM
I can't see how your workaround is going to do anything but cause you more problems. You're now putting Ext in a state where when running in Firefox, it won't add the ext-gecko tag. It then won't see any of the gecko-specific CSS entries and you're layout will be broken.

I would suggest that you test without the prototype stuff to see if this is still happening. If it's not, it would seem like somehow prototype is breaking the Ext browser sniffing code which adds the body class. Also, if you're using prototype, I would think you should be using the prototype adapter rather than the ext-base adapter.