Ext Js IE error only

13,137

Solution 1

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.

Solution 2

Here is how I troubleshoot this in Ext/IE:

  1. 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*[}|]])"

  2. 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

  3. 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.

Solution 3

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 ?

Solution 4

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

Solution 5

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?

Share:
13,137

Related videos on Youtube

Peter Burns
Author by

Peter Burns

Stack Overflow Valued Associate #00001 Wondering how our software development process works? Take a look! Find me on twitter, or read my blog. Don't say I didn't warn you because I totally did. However, I no longer work at Stack Exchange, Inc. I'll miss you all. Well, some of you, anyway. :)

Updated on June 04, 2022

Comments

  • Peter Burns
    Peter Burns almost 2 years

    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>
    
  • Admin
    Admin over 12 years
    I've already looked into these links, but I'll revise them again. thank you