ext js - el.ownerDocument.createRange() errors in IE 8

Question

HI, I am trying to dynamically add a form to a tab in Ext-js. (the tab has already been rendered). fyi, i am using I am using Ext 2.2.

the error occurs when during the tab.add function: ie:

function tabactivate(tab)   {    
            var newItem= new Ext.FormPanel(.....);              
            **tab.add(newItem)**;    //ERRORS HERE    
            tab.doLayout();            
 }

I get this error on line 247 of ext-all-debug.js which is

range = el.ownerDocument.createRange();

the error is (Object doesn't support this property or method.)

This works fine in Firefox but breaks in IE8. Does anyone know a workaround for this ?

Thanks

Answer 1

This sounds very similar to an issue I had with ExtJS 2.2 and IE.

It seems like a lot of places in the Ext code that you see code like this:

var td = document.createElement("td");
this.tr.insertBefore(td, this.tr.childNodes[index]);

When in fact that doesn't work on IE because "this.tr.childNodes([0])" does not yet exist.

My workaround was to override the prototype (in my case insertButton() in Ext.Toolbar) to check for the existence of this.tr.childNodes([0]), using a different function or creating it if it didn't exist.

I hope that I'm correct that this is the problem you are running into.

Answer 2

So i found an old string that had the solution for me. http://www.extjs.com/forum/showthread.php?t=7912&highlight=createRange

Essentially, when i was instantiating empty tabs, i had my html property set to this:

html: ' ' ,

once i either took the property out completely or i changed to

html: '<span></span>'

it stopped breaking.

Thanks

Answer 3

IE (even 8) doesn't support the document.createRange() method.

You can try var supportsDOMRanges = document.implementation.hasFeature("Range", "2.0"); to see whether a browser supports DOM ranges per the standard.