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