View Full Version : [OPEN-1434] ExtJS, TreePanel and IE9

15 Nov 2010, 9:55 AM

I've been trying to get a TreePanel working correctly in IE9, but encountered several problems, not least of all the fact the it mis-identified IE9 as IE6, I'm well aware that this has been raised several times, and indeed I found the solution in this post (http://www.sencha.com/forum/showthread.php?111900-Compatibility-with-Internet-Explorer-9&highlight=ie9).

However even after getting ExtJS to identify IE9 as IE8, events will not fire on TreePanels, this is true of the ExtJS Drag and Drop ordering in a TreePanel example (http://dev.sencha.com/deploy/dev/examples/tree/reorder.html) (You have to use the dev tools[F12] to force IE9 into IE9 rendering mode otherwise it'll be in Quirks mode). I'm not certain why it only affects the tree panel events, as all other item's (tabs, buttons, etc) events work fine.

Regardless of planned IE9 support, could anyone give me an indication of where in the code I could drill into to perhaps work out what the issue is, so I have a bit of a head start.

I realise that IE9 is still a beta, but it has been released for some time now, and it's probably safe to assume that the final release will be fairly early in 2011. Is there a plan for minor revision of 3.3 to provide support for ExtJS before a final release of IE9 surfaces?



8 Feb 2011, 7:35 PM
@Tegud, any luck with getting Trees/ IE9 working?

As you found, IE9 detection doesn’t resolve this (http://www.sencha.com/forum/showthread.php?111900-Compatibility-with-Internet-Explorer-9)

Also, IE8/7 emulation produces many other problems and isn’t supported.

If anyone is able to provide suggestions on how to get trees/ IE9 working it would be much appreciated.

11 Feb 2011, 12:47 AM
I have a er..."fix", but it's really not very nice, and causes a whole host of other issues, though some of them do seem lessened by the IE9 RC.

I added this after the "is" checks in ext-base-debug.js, like 82.

// IE9 behaves much better in Chrome mode than in IE6 mode.
if(isIE && check(/msie 9/)) {
isIE6 = isIE = false;
isChrome = true;

Obviously I am aware that telling ExtJS that IE9 is chrome isn't a particularly good idea, but it gets the trees working and its in development internal application, so it's not exactly mission critical.

I'm running with the assumption that IE9 compatibility for ExtJS 3 will be addressed at some point. I'm hoping the release of IE9 RC will now see an ExtJS compatible minor release?



21 Feb 2011, 4:07 AM
Thanks for the "fix" - provides an option for some of our IE9 dev testing.

25 Mar 2011, 2:50 AM
The proper release of IE9 (ie not the RC versions) shows the following problems in my app using ext 3.3.0
- menus don't show icons
- menus are not wide enough for text
- tree panels don't get hover/mouse events (expand buttons, tooltips, context menus) but do get drag drop events

and these all seem to be caused by the fact isIE and isIE6 are true.

So all of these are fixed by a variation on the above, I load extjs with an extra bit of code between loading the base and all the rest of Ext

<script type='text/javascript' src='http://extjs-public.googlecode.com/svn/tags/extjs-3.3.0/release/adapter/ext/ext-base.js'></script>
<script type='text/javascript'>
// hack hack hackity hack
if (Ext.isIE6 && /msie 9/.test(navigator.userAgent.toLowerCase())) {
Ext.isIE6 = Ext.isIE = false;
Ext.isChrome = Ext.isIE9 = true;
<script type='text/javascript' src='http://extjs-public.googlecode.com/svn/tags/extjs-3.3.0/release/ext-all.js'></script>

The "isIE9" is NOT a standard ext flag, but I add it so that I can internally check for this hack.

5 Apr 2011, 12:11 PM
Just wanted to add my two cents that this is a major bug for us and we would like to have a fix as soon as possible. The Chrome hack really won't work for us.

15 Apr 2011, 8:44 AM
I think this is a big issue. Hope these folks fix it soon.

23 Apr 2011, 9:44 AM
i've this issue too... i hope it will be fixed soon...

11 May 2011, 4:57 AM
I am having this issue also, no fix yet?

24 May 2011, 5:33 AM
This is the solution we used:
Tree panels work
Also the "createContextualFragment" issue is solved
And you do not need to change any Ext files

index file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">

24 May 2011, 3:00 PM
I hadn't tried
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
as I already have
<meta http-equiv="X-UA-Compatible" content="IE=IE9">
because I'm relying on HTML5 features in IE9 and I need to force it into strict IE9 mode.

Could investigate
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8, IE=9">
as you can specify more than one such tag, but I suspect you'll either get IE8 or IE9 mode overall.

Of course if you don't need strict compliance (HTML5, CSS3, etc) then this sounds like an easier fix

1 Jun 2011, 12:35 AM
It has no ability to detect IE9, so thinks you are running pre version 6 to a certain extent..

in ext-base-debug.js if you change the following line it appears to work:

isIE8 = isIE && (check(/msie 8/) && docMode != 7),


isIE8 = isIE && (check(/msie [89]/) && docMode != 7),

This is clearly a bodge, but I haven't found an issue in my app yet.

You obviously need to make sure you are including the debug file, and you will need to reminify for production.

6 Jun 2011, 7:16 PM
this helpful to me. thanks.

26 Jun 2011, 9:50 PM
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">

Thanks, I like this one. No ExtJS hacking, no javascript override, no one is fooled. It's simple and it works.

27 Jun 2011, 5:02 AM
Also, Ext JS 3.4.0 (http://www.sencha.com/products/extjs3/download/) is released, specific to IE9 issues and fixes. Most of the issues seems to be addressed in there !

4 Dec 2012, 9:05 AM

I was façing the same issue on a TreePanel.
IE9 is building its dom as firefox and chrome and so the research of the tree-node-id (tree elements) doesn't retrieve any elements;

This is how I fixed the problem : I overrided the method getAttributeNS of Ext.Element :

Ext.override(Ext.Element, {
* Returns the value of a namespaced attribute from the element's underlying DOM node.
* @param {String} namespace The namespace in which to look for the attribute
* @param {String} name The attribute name
* @return {String} The attribute value
getAttributeNS : Ext.isIE && !Ext.isIE9 ? function(ns, name){
var d = this.dom;
var type = typeof d[ns+":"+name];
if(type != 'undefined' && type != 'unknown'){
return d[ns+":"+name];
return d[name];
} : function(ns, name){
var d = this.dom;
return d.getAttributeNS(ns, name) || d.getAttribute(ns+":"+name) || d.getAttribute(name) || d[name];

5 Feb 2013, 11:13 PM
Does any one came up with a solution for that? I am using ExtJs 3.2.1 with IE9 and I got this problem. Suggestion:
This is how I fixed the problem : I overrided the method getAttributeNS of Ext.Element : did not work for me as well. Is anyone working on fixing that in ExtJs team? It is a big problem I think...

Any info would be appreciated...


6 Feb 2013, 3:22 AM
I fixed the problem in getNode method in Ext.tree.TreeEvenModel:

Ext.isIE9 = Ext.isIE && (/msie 9/).test(navigator.userAgent.toLowerCase());

if (Ext.isIE9) {
Ext.override(Ext.tree.TreeEventModel, {
getNode: function (e) {
var t;
if (t = e.getTarget('.x-tree-node-el', 10)) {
//var id = Ext.fly(t, '_treeEvents').getAttribute('tree-node-id', 'ext');// BUG !!!
var id = e.getTarget('.x-tree-node-el', 10).getAttribute("ext:tree-node-id") // FIX!!!
if (id) {
return this.tree.getNodeById(id);
return null;

Problem was in getting the ID. It was undefined all the time. Method Ext.fly returned null, and this is why Tree did not want to work. Hope this will help someone