Ext Js IE error only

Question

My web app works fine on Firefox or Chrome but not in IE. It shows me the following message:

Object doesn't support this property or method

File: ext-all.js - Line: 7 - Char: 6100

Any ideas how to fix it?

BTW: I'm using ext 3.4.

Edit: All my ext layout creator code:

Ext.onReady(function() { 
var viewport = new Ext.Viewport({ 
    layout: 'border', 
    renderTo: document.body, 
    items: [{ 
        region: 'north', 
        height: 25, 
        xtype: 'toolbar', 
        items: [{ 
            xtype: 'button', 
            text: 'Início', 
            iconCls: 'home', 
            handler:function() { 
                var tabs = Ext.getCmp('dynamic-tabs'); 
                tabs.add({ 
                    title: 'Início', 
                    closable:true, 
                    iconCls:'home' 
                }).show(); 
            } 
        }, { 
            xtype: 'button', 
            text: 'Sistema', 
            iconCls: 'sistema',
             menu: {
                 items: [{
                     text: 'Usuários', 
                     iconCls: 'usuario', 
                     handler: function(){ }, 
                     menu: { 
                        items: [{ 
                            text: 'Teste1',
                            iconCls: 'usuario', 
                            handler: function(){ 
                                var tabs = Ext.getCmp('dynamic-tabs'); 
                                tabs.add({ 
                                    title: 'Teste1', 
                                    closable:true, 
                                    autoLoad: 'iframe.php?url=index.php', 
                                    iconCls: 'usuario' 
                                }).show(); 
                            }
                        }, { 
                            text: 'Teste2', 
                            iconCls: 'usuario', 
                            handler: function(){ 
                                var tabs = Ext.getCmp('dynamic-tabs'); 
                                tabs.add({ 
                                    title: 'Teste2', 
                                    closable:true, 
                                    autoLoad: 'iframe.php?url=index.php', 
                                    iconCls: 'usuario' 
                                }).show(); 
                            } 
                        }] 
                    }
                }, { 
                    text: 'Configurações', 
                    iconCls: 'sistema', 
                    handler: function(){ 
                        var tabs = Ext.getCmp('dynamic-tabs'); 
                        tabs.add({ 
                            title: 'Configurações', 
                            closable:true, 
                            autoLoad: 'iframe.php?url=form.php', 
                            iconCls: 'sistema' 
                        }).show(); 
                    }
                }, { 
                    text: 'Relatório Vertical', 
                    iconCls: 'relatorio', 
                    handler: function(){ 
                        var tabs = Ext.getCmp('dynamic-tabs'); 
                        tabs.add({
                            title: 'Relatório Vertical', 
                            closable:true, 
                            autoLoad: 'iframe.php?url=relatorio_v.php', 
                            iconCls: 'relatorio'
                        }).show(); 
                    } 
                }, { 
                    text: 'Relatório Horizontal',
                    iconCls: 'relatorio', 
                    handler: function(){ 
                    var tabs = Ext.getCmp('dynamic-tabs'); 
                    tabs.add({ 
                        title: 'Relatório Horizontal', 
                        closable:true, 
                        autoLoad: 'iframe.php?url=relatorio_h.php', 
                        iconCls: 'relatorio' 
                    }).show(); 
                } 
            },
            '-', { 
                text: 'Sair', 
                iconCls: 'logoff', 
                handler: function(){
                    location.reload() 
                } 
            }] 
        } 
    }, { 
        xtype: 'button', 
        text: 'Abas', 
        iconCls: 'abas', 
        menu: { 
            items: [{ 
                text: 'Criar nova Aba', 
                iconCls: 'tab_add', 
                handler: function(){ 
                    var tabs = Ext.getCmp('dynamic-tabs'); 
                    tabs.add({
                        title: 'Nova Aba', 
                        html: 'Tab Body', 
                        closable:true, 
                        iconCls: 'tab_add' 
                    }).show() 
                } 
            }, { 
                text: 'Ir para a primeira Aba', 
                iconCls: 'tab_go', 
                handler: function(){
                    tabs.setActiveTab(0); 
                }
            }, { 
                text: 'Excluir 2a Aba', 
                iconCls: 'tab_delete', 
                handler: function(){ 
                    var tabs = Ext.getCmp('dynamic-tabs'); 
                    if (tabs.get(1)) { 
                        var tab = tabs.get(1); 
                        tabs.remove(tab); 
                    } 
                } 
            }] 
        } 
    }, { 
        xtype: 'button', 
        text: 'Menus', 
        iconCls: 'usuario', 
        menu: { 
            items: [{ 
                text: 'Sub-menus com título dif.', 
                iconCls: 'usuario', 
                handler: function(){ }, 
                menu: {
                    items: ['Título do Sub-menu', 
                    { 
                        text: 'Sub-menu #1', 
                        iconCls: 'usuario', 
                        handler: function(){ 
                            var tabs = Ext.getCmp('dynamic-tabs');
                            tabs.add({ 
                                title: 'Sub-menu #1', 
                                closable:true, 
                                autoLoad: 'iframe.php?url=phpinfo.php', 
                                iconCls: 'usuario'
                            }).show(); 
                        } 
                    }, { 
                        text: 'Sub-menu #2', 
                        iconCls: 'usuario', 
                        handler: function(){ 
                            var tabs = Ext.getCmp('dynamic-tabs'); 
                            tabs.add({
                                title: 'Sub-menu #2', 
                                closable:true, 
                                autoLoad: 'iframe.php?url=phpinfo.php', 
                                iconCls: 'usuario'
                            }).show(); 
                        } 
                    }] 
                }
            }, { 
                text: 'Sub-menus com título igual',
                iconCls: 'usuario', 
                handler: function(){ }, 
                menu: {
                    items: ['Sub-menus com título igual', 
                    {
                        text: 'Sub-menu #1', 
                        iconCls: 'usuario', 
                        handler: function(){ 
                            var tabs = Ext.getCmp('dynamic-tabs'); 
                            tabs.add({
                                title: 'Sub-menu #1', 
                                closable:true, 
                                autoLoad: 'iframe.php?url=phpinfo.php', 
                                iconCls: 'usuario'
                            }).show(); 
                        }
                    }, { 
                        text: 'Sub-menu #2', 
                        iconCls: 'usuario', 
                        handler: function(){ 
                            var tabs = Ext.getCmp('dynamic-tabs'); 
                            tabs.add({ 
                                title: 'Sub-menu #2', 
                                closable:true, 
                                autoLoad: 'iframe.php?url=phpinfo.php', 
                                iconCls: 'usuario'
                            }).show();
                        } 
                    }] 
                } 
            }, { 
                text: 'Sub-menus sem título', 
                iconCls: 'usuario', 
                handler: function(){ }, 
                menu: { 
                    items: [{ 
                        text: 'Sub-menu #1', 
                        iconCls: 'usuario', 
                        handler: function(){ 
                            var tabs = Ext.getCmp('dynamic-tabs'); 
                            tabs.add({
                                title: 'Sub-menu #1', 
                                closable:true, 
                                autoLoad: 'iframe.php?url=phpinfo.php', 
                                iconCls: 'usuario'
                            }).show(); 
                        } 
                    }, { 
                        text: 'Sub-menu #2', 
                        iconCls: 'usuario', 
                        handler: function(){ 
                            var tabs = Ext.getCmp('dynamic-tabs'); 
                            tabs.add({ 
                                title: 'Sub-menu #2', 
                                closable:true, 
                                autoLoad: 'iframe.php?url=phpinfo.php', 
                                iconCls: 'usuario'
                            }).show(); 
                        } 
                    }] 
                } 
            }, { 
                text: 'Sub-menu grande', 
                iconCls: 'usuario', 
                handler: function(){ }, 
                menu: { 
                    items: [{
                        text: 'Nível #1', 
                        iconCls: 'usuario', 
                        handler: function(){ }, 
                        menu: { 
                            items: [{ 
                                text: 'Nível #2', 
                                iconCls: 'usuario', 
                                handler: function(){ }, 
                                menu: { 
                                    items: [{ 
                                        text: 'Nível #3', 
                                        iconCls: 'usuario', 
                                        handler: function(){ }, 
                                        menu: { 
                                            items: [{ 
                                                text: 'Nível #4 e etc...', 
                                                iconCls: 'usuario', 
                                                handler: function(){ } 
                                            }] 
                                        } 
                                    }] 
                                } 
                            }] 
                        } 
                    }] 
                } 
            }] 
        } 
    }] 
} , { 
    region: 'center', 
    xtype: 'tabpanel', 
    id: 'dynamic-tabs', 
    items: [{
        title: 'Início', 
        autoLoad: 'iframe.php?url=phpinfo.php', 
        iconCls:'home'
}] 
} , { 
    region: 'south', 
    xtype: 'toolbar', 
    id: 'barra', 
    height: 25, 
    items: [{ 
        xtype: 'tbtext', 
        text: 'Pacific Tecnologia da Informação © 2011', 
        html: '<img src=\'imagens/logo_peq.png\' />' 
    }] 
}] 
}); 

var tabs = Ext.getCmp('dynamic-tabs'); tabs.setActiveTab(0); });

It's a simple sample menu. I tested in IE version 8 and emulating 7 with compatibility mode.

Interesting observation: In Firefox firebug's console shows:

  <html xmlns="http://www.w3.org/1999/xhtml" class=" x-viewport">
    <head></head>
    <body id="ext-gen5" class=" ext-gecko ext-gecko3 x-border-layout-ct">
    etc...

IE's Developers Tools shows:

    <html class=" x-quirks  ext-border-box x-viewport">
    <head>
    <title></title>
    <body class="   ext-ie ext-ie7 x-border-layout-ct" id="ext-gen5" scroll="no">
    Texto - 
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    Texto - Nó de Texto Vazio
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script language="javascript" src="js/ext/adapter/ext/ext-base.js" type="text/javascript"></script>
    etc...

My HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <script type="text/javascript" language="javascript" src="js/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" language="javascript" src="js/ext/ext-all-debug.js"></script>
    <script type="text/javascript" language="javascript" src="js/menu.js.php"></script>
    <script type="text/javascript" language="javascript" src="js/layout.js.php"></script>
    <link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="js/ext/resources/css/xtheme-blue.css" />
    <link rel="stylesheet" type="text/css" href="css/menu.css" />
    <link rel="stylesheet" type="text/css" href="css/layout.css" />
    <link rel="stylesheet" type="text/css" href="css/icones.css.php" /></head>
 
<body>
</body>
</html>

Guys, I know that error says that IE doesn't understand something, but my problema is why it not work only in IE if it works on other browsers seeing that EXT JS is cross-browser, right ? The error seems to be on this cmd: `F=y.ownerDocument.createRange()` but I'm not sure. Sometimes I want to break each IE developers neck >| — , Oct 14 '11 at 12:43
is the HTML code copy paste? The IE does not close the Header... I will add some HTML code to my post... — sra, Oct 25 '11 at 11:05
@sra Look my edit, that's my pure entire html. The layout.js.php have no script and menu.js.php is the ext script posted above. — , Oct 25 '11 at 11:55
Yes but nothing changes. I'm going mad with this. I think I'll re-write all the code from the begginig.. =S — , Oct 25 '11 at 12:34
Do you know by now whats behind the `el` element? Till know you have just stated out the line and the code within that line... — sra, Oct 25 '11 at 12:36
@sra `el` is a `DispHTMLDOMTextNode` according by IE Dev Tools. Is an empty text node with some `\n` generated by IE I believe. — , Oct 25 '11 at 12:53
OK, then the next step is to identify at which point the el var get set and from which ExtJS object. You can read back in code and maybe set some breakpoints to archive this. — sra, Oct 25 '11 at 13:09

sra · Accepted Answer · 2011-10-25T11:08:10.570

4

I had this error previously. In my case I had an entity called location and ext created a object from it. Now the IE used the JS native location object and tried to execute methods on it. The error looked much the same as your error.

Use the IE developer toolbar and debug your code to identify the exact object. That's how I solved this issue!

EDIT based on the new Demo code:

Your HTML file should start with

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

I never had any problems with these settings. The debugger may look different, cause ExtJS will add classes at runtime, but this should be your source HTML file.

edited Oct 25 '11 at 11:08

answered Oct 14 '11 at 13:26

sra

23,820
7
55
89

What you mean 'entity'? I'll check my code again, but I'm always avoid to use reserved keywords... – Oct 14 '11 at 16:26
With entity I mean a data object, but never mind that. Use the debug Version of to ext js and Start the IE dev Tools as I mentioned above... – sra Oct 15 '11 at 04:50
Well, I don't really know how to use IE dev tools, don't know were to find errors messages in that. But with debug version the error that IE showed to me is this: `Object doesn't support this property or method` on line 520 that contains this instruction: `range = el.ownerDocument.createRange();`. It still other browser render the app okay. – Oct 17 '11 at 15:51
You will need to identify whats behind `el` and `ownerDocument` to solve this. Further help without a demo is not possible cause it is just guessing. The other thing that is important is the Version of the IE and if you had done an update since you last tested it... – sra Oct 25 '11 at 10:28
I reduced my code to just center and south region and works, when I put the north region with the toolbar - even with just one button - IE crashes.. I think that is the `xtype` – Oct 25 '11 at 17:45
@Márcio OK, so all works fine without the north region as `xtype: 'toolbar'`? I wouldn't do it the way you do that. I would pack the toolbar as item of the north region. That should also fix your problem. I didn't seen that before. – sra Oct 26 '11 at 11:11
Yes, if I remove the toolbar ext works well. I'll try the way you said. – Oct 26 '11 at 13:37
I did not found the error. Probably my mistake but I tried everything you guys said here plus tons of web searches. I'll chose your answer because you helped more than anyone and your suggestions pointed to a more clear way. thank you. – Oct 31 '11 at 17:20

score 1 · Answer 2 · answered Oct 14 '11 at 12:24

1

Seems like you try to call a property or method that IE is the only one that can't understand. Are you using some natives objects that could be known by everyone except IE ?

answered Oct 14 '11 at 12:24

Frederik.L

5,522
2
29
41

score 1 · Answer 3 · answered Oct 14 '11 at 12:27

1

You call a method or a property on an object that doesn't support it. Try to find what kind of object is that one and add the method to it.

Can you provide some code please?

answered Oct 14 '11 at 12:27

Ionel Cucu

71
3

score 1 · Answer 4 · edited May 23 '17 at 11:55

1

can you include ext-all-debug.js instead of ext-all.js? And then tell us which line is throwing the error? Some possible solutions http://www.sencha.com/forum/showthread.php?81087-OPEN-418-3.0.0-el.ownerDocument.createRange()-error-in-IE8

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

edited May 23 '17 at 11:55

Community

1
1

answered Oct 19 '11 at 01:10

Chao

1,058
7
12

Like I commented on @sra answer: "But with debug version the error that IE showed to me is this: `Object doesn't support this property or method` on line **520** that contains this instruction: `range = el.ownerDocument.createRange();`" – Oct 19 '11 at 10:39
I see. Is it possible for you to look at the stack trace and find out what "el" is referring to? – Chao Oct 19 '11 at 13:13
I put a stop point in this line with firebug and putting mouse over `el` it shows: `` . And over `ownerDocument` it shows: `Document /frame/` *frame* is my root directory e.g. `localhost/frame`. It helps ?? – Oct 19 '11 at 18:45
I have updated my answer with some links, I don't know if you have been through them already – Chao Oct 19 '11 at 21:53
Sencha foruns is unavailable =s And seeing the stack topic I tryied what tha guy said. First of all I had no `html: ' '` like he sais in his post, but I got some `html:'Tag body'` that I changed to `html:''` as he changed. But the erros still the same – Oct 20 '11 at 10:46

score 1 · Answer 5 · answered Oct 23 '11 at 15:22

Here is how I troubleshoot this in Ext/IE:

Check for dangling commas. Older versions of IE hate a comma before a } or ]. Ext's coding style makes this mistake likely. I use this (jEdit) regex to search: ",(\s*\n*\s*[}|]])"
Use alerts to identify the line of your code that leads to the error. You will probably be passing an object to an Ext function. This object is likely null/undefined or not of the type expected. An alert(typeof somevar) might be helpful here. If there is no obvious entry point, look to your "xtype" definitions and listeners: one of these might be invalid
Watch out of global poisoning. I ran into a problem recently where I had a global JS variable with the same name as a DIV's id property. IE tries to make a global variable out of every DOM id,and I was picking up the wrong one. If this is affecting you it is probably because a local function variable is missing the "var" keyword and thus conflicting with he global space.

I had no time to check out your sugestions, but I'll try soon. Thank you. — , Oct 24 '11 at 16:24
1. Commas is okay; 2. The `el` object that causes the error refers to a textNode created by IE itself. I doesn't supports `createRange` function.; 3. I got none except EXT script, no variable name can crash with objects ids or other ext vars — , Oct 25 '11 at 11:59

score 0 · Answer 6 · edited May 23 '17 at 12:03

0

You sir have probably encountered the dreaded "owner.createDocument.createRange IE Bug"

Some solutions point to the fact that the first node is not valid.

Here are two possible solutions :

http://www.sencha.com/forum/showthread.php?7912-CLOSED-owner.createDocument.createRange-JS-error&highlight=createRange

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

Good luck

edited May 23 '17 at 12:03

Community

1
1

answered Oct 24 '11 at 15:27

Khan

516
11
24

I've already looked into these links, but I'll revise them again. thank you – Oct 24 '11 at 16:23

score 0 · Answer 7 · answered Dec 16 '11 at 16:59

0

It's an IE Bug, may it fixed on version 4.

answered Dec 16 '11 at 16:59

VoteMeUp

15
1
5

Ext Js IE error only

7 Answers7