CODEWITHSUNDEEP
javascriptinternet-explorerextjsextjs3
user898741
user898741

Reputation:

Ext Js IE error only

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>

Upvotes: 6

Views: 13251

Answers (7)

VoteMeUp
VoteMeUp

Reputation: 15

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

Upvotes: 0

sra
sra

Reputation: 23973

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.

Upvotes: 4

Khan
Khan

Reputation: 516

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

Upvotes: 0

Mark Porter
Mark Porter

Reputation: 1630

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.

Upvotes: 1

Chao
Chao

Reputation: 1058

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

Upvotes: 1

Ionel Cucu
Ionel Cucu

Reputation: 71

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?

Upvotes: 1

Frederik.L
Frederik.L

Reputation: 5620

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 ?

Upvotes: 1

Related Questions