仅 Ext Js IE 错误

Posted

技术标签:

【中文标题】仅 Ext Js IE 错误【英文标题】:Ext Js IE error only 【发布时间】:2011-10-14 12:20:18 【问题描述】:

我的 Web 应用在 Firefox 或 Chrome 上运行良好,但在 IE 上却不行。它向我显示以下消息:

对象不支持该属性或方法

文件:ext-all.js - 行:7 - 字符:6100

有什么解决办法吗?

顺便说一句:我使用的是 ext 3.4。

编辑:我所有的 ext 布局创建者代码:

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); );

这是一个简单的示例菜单。我在 IE 版本 8 中进行了测试,并在兼容模式下模拟了 7。

有趣的观察:在 Firefox firebug 的控制台显示:

  <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 的开发者工具显示:

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

我的 HTML 文件:

<!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>

【问题讨论】:

伙计们,我知道这个错误表明 IE 不理解某些东西,但我的问题是为什么它不能只在 IE 中工作,如果它在其他浏览器上工作,因为它看到 EXT JS 是跨浏览器,对吧?错误似乎在这个 cmd 上:F=y.ownerDocument.createRange() 但我不确定。有时候想掐断每个IE开发者的脖子>| 是HTML代码复制粘贴吗? IE没有关闭Header...我将在我的帖子中添加一些HTML代码... @sra 看看我的编辑,那是我纯粹的整个 html。 layout.js.php 没有脚本,menu.js.php 是上面发布的 ext 脚本。 您尝试过我帖子中的文档类型吗? 是的,但没有任何变化。我要疯了。我想我会重写所有的代码从begginig .. =S 【参考方案1】:

我之前遇到过这个错误。就我而言,我有一个名为 location 的实体,ext 从中创建了一个对象。现在 IE 使用了 JS 原生的 location 对象并尝试在它上面执行方法。该错误看起来与您的错误大致相同。

使用 IE 开发人员工具栏并调试您的代码以识别确切的对象。我就是这样解决这个问题的!

基于新的 Demo 代码编辑:

您的 HTML 文件应以

开头
<!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" />

这些设置我从来没有遇到过任何问题。调试器可能看起来不同,因为 ExtJS 会在运行时添加类,但这应该是您的源 HTML 文件。

【讨论】:

你的意思是“实体”?我会再次检查我的代码,但我总是避免使用保留关键字... 实体是指数据对象,但不要介意。使用调试版本的 to ext js 并启动我上面提到的 IE 开发工具... 好吧,我真的不知道如何使用 IE 开发工具,不知道在其中找到错误消息。但是对于调试版本,IE 向我显示的错误是:Object doesn't support this property or method 第 520 行包含此指令:range = el.ownerDocument.createRange();。它仍然是其他浏览器可以正常呈现应用程序。 您需要识别 elownerDocument 背后的内容来解决这个问题。没有演示的进一步帮助是不可能的,因为它只是猜测。另一件重要的事情是 IE 的版本,如果您在上次测试后进行了更新... 我将代码减少到中部和南部区域并且可以工作,当我将北部区域与工具栏一起放置时 - 即使只有一个按钮 - IE 崩溃.. 我认为那是 xtype 【参考方案2】:

似乎您尝试调用 IE 是唯一无法理解的属性或方法。您是否使用了一些除了 IE 之外的所有人都知道的原生对象?

【讨论】:

【参考方案3】:

您在不支持的对象上调用方法或属性。 试着找出那个对象是什么类型的对象,然后给它添加方法。

你能提供一些代码吗?

【讨论】:

【参考方案4】:

你可以包含 ext-all-debug.js 而不是 ext-all.js 吗?然后告诉我们哪一行抛出了错误? 一些可能的解决方案 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

【讨论】:

就像我对@sra 的回答一样:“但是对于调试版本,IE 向我显示的错误是这样的:Object doesn't support this property or method 在包含此指令的 520 行上:@ 987654324@" 我明白了。您是否可以查看堆栈跟踪并找出“el”指的是什么? 我用萤火虫在这条线上设置了一个停止点,并将鼠标放在el 上,它显示:&lt;TextNode textContent="\n\n\n "&gt;。在ownerDocument 上显示:Document /frame/ frame 是我的根目录,例如localhost/frame。有帮助吗?? 我已经用一些链接更新了我的答案,我不知道你是否已经通过它们了 Sencha foruns 不可用 =s 看到堆栈主题,我尝试了那家伙所说的内容。首先,我没有html: '&amp;nbsp;',就像他在他的帖子中所说的那样,但我得到了一些html:'Tag body',随着他的变化我改成了html:'&lt;span&gt;&lt;/span&gt;'。但错误还是一样【参考方案5】:

这是我在 Ext/IE 中解决此问题的方法:

    检查悬空逗号。旧版本的 IE 讨厌 或 ] 之前的逗号。 Ext 的编码风格很可能导致这个错误。我使用这个 (jEdit) 正则表达式来搜索: ",(\s*\n*\s*[|]])"

    使用警报来识别导致错误的代码行。您可能会将一个对象传递给 Ext 函数。此对象可能为 null/未定义或不是预期的类型。 alert(typeof somevar) 在这里可能会有所帮助。如果没有明显的入口点,请查看您的“xtype”定义和侦听器:其中之一可能无效

    提防全球中毒。我最近遇到了一个问题,我有一个与 DIV 的 id 属性同名的全局 JS 变量。 IE 试图从每个 DOM id 中创建一个全局变量,但我选错了。如果这对您有影响,可能是因为局部函数变量缺少“var”关键字,因此与全局空间冲突。

【讨论】:

我没有时间查看您的建议,但我会尽快尝试。谢谢。 1.逗号没问题; 2.导致错误的el对象是指IE自己创建的textNode。我不支持createRange 功能。 3. 除了 EXT 脚本,我什么都没有,没有变量名可以与对象 id 或其他 ext vars 崩溃【参考方案6】:

您先生可能遇到了可怕的“owner.createDocument.createRange IE Bug”

一些解决方案指出第一个节点无效。

这里有两种可能的解决方案:

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

祝你好运

【讨论】:

我已经查看了这些链接,但我会再次修改它们。谢谢【参考方案7】:

这是一个 IE 错误,希望它在版本 4 上修复。

【讨论】:

以上是关于仅 Ext Js IE 错误的主要内容,如果未能解决你的问题,请参考以下文章

仅适用于 IE 用户的 SSL 证书错误

Selenium + Java 错误监听器 ext.js

仅Mootools 1.3.2和IE8错误,对象不支持属性/方法

动态添加数字字段的 ext js 代码不显示任何错误,也不呈现任何 UI

无法加载视图状态。仅在 IE 中发生错误

Ext JS 5 关于Store load返回json错误信息或异常的处理