All geek questions in one place

Error only for JS IE

My web application works fine in Firefox or Chrome, but not in IE. He shows me the following message:

The object does not support this property or method.

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

Any ideas how to fix this?

BTW: I am using ext 3.4.

Edit: all the code of the creator of the external layout:

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

This is a simple menu. I tested in IE version 8 and emulated 7 in compatibility mode.

Interesting observation: in Firefox firebug console it is shown:

  <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 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>
+6
source share
7 answers

I had this error earlier. In my case, I had an object called location , and ext created an object from it. Now IE used its own JS location object and tried to execute methods on it. The error looked the same as your error.

Use the IE Developer Toolbar and debug your code to determine the exact object. This is how I solved this problem!

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 have never had a problem with these settings. The debugger may look different, because ExtJS will add classes at runtime, but it should be your original HTML file.

+4
source

It looks like you are trying to call a property or method, which IE is the only one that cannot understand. Do you use some native objects that may be known to everyone except IE?

+1
source

You call a method or property of an object that does not support it. Try to find out what this object is and add a method to it.

Can you provide the code please?

+1
source

Can you include ext-all-debug.js instead of ext-all.js? And then tell us which line throws an error? Some possible solutions are 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

+1
source

Here is how I fix this in Ext / IE:

  • Check for confused commas. Older versions of IE hate the comma before} or]. The external coding style makes this error likely. I use this (jEdit) regular expression to search: ", (\ s * \ n * \ s * [} |]])"

  • Use alerts to identify the line of your code that leads to the error. You will probably pass the object to the Ext function. This object is probably null / undefined or not the expected type. A warning (typeof somevar) may be helpful here. If there is no obvious entry point, look at the definitions of "xtype" and listeners: one of them may be invalid

  • Beware of global poisoning. I recently ran into a problem when I had a JS global variable with the same name as the DIV id property. IE is trying to make a global variable from each DOM identifier, and I was picking the wrong one. If this affects you, it is probably because the “var” keyword is missing from the local variable of the function and thus contradicts global space.

+1
source

You sir probably met the scary "owner.createDocument.createRange IE Bug"

Some solutions indicate that the first node is invalid.

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.

0
source

This is an IE bug, it can be fixed on version 4.

0
source

Source: https://habr.com/ru/post/899296/

More articles:


All Articles