PDA

View Full Version : [IE8] JS Error using a TabPanel in a Window



bramvano
21 Oct 2009, 4:05 AM
I'm getting the following error in InternetExplorer only (7 and 8), not in Firefox and Safari.


'd.getEl().child(...)' is null or not an object

I have a button that opens a window (Application.Supplies.window.show()). The first time I click the button the error appears and the window does not open. The second time I click the button the window does show.

The error is related to the TabPanel I use in the window. If I remove the item from the window there is no error.

The code:

The button:


{
iconCls: 'icon_shop',
scale: 'large',
tooltip: 'Order supplies',
handler: function()
{
parent.Supplies.window.show();
}
}

The window:


this.window = new Ext.Window(
{
id: 'window_supplies',
title: 'Supplies',
iconCls: 'icon_shop',
layout: 'fit',
width: 850,
height: 550,
closeAction: 'hide',
plain: true,
modal: true,
hidden: true,
items: [this.tabPanel],
buttons: [
{
text: 'Close',
handler : function(btn) { this.window.hide(); },
scope: this
}]
});

The tabpanel (tab-content is reloaded every time a tab is activated):


this.tabPanel = new Ext.TabPanel(
{
id: 'supplies_tabPanel',
autoScroll: true,
margins: '0 0 0 0',
plain: true,
defaults: {autoScroll: true},
activeTab: 0,
autoDestroy: false,
items:[
{
id: 'supplies_tab_products',
iconCls: 'icon_brick',
contentEl: 'tabs',
title: 'Products',
padding: '10 10 10 10',
closable: false,
autoScroll: true,
autoLoad:
{
url: 'view/supplies/products.html.php',
scripts: true
},
listeners:
{
'activate': function()
{
if (Ext.getCmp('supplies_tab_products').body != undefined)
Ext.getCmp('supplies_tab_products').doAutoLoad();
}
}
},{
id: 'supplies_tab_shoppingcart',
iconCls: 'icon_shop',
contentEl: 'tabs',
padding: '10 10 10 10',
title: 'Shopping cart',
closable: false,
autoLoad:
{
url: 'view/supplies/shopping_cart.html.php',
scripts: true
},
listeners:
{
'activate': function()
{
if (Ext.getCmp('supplies_tab_shoppingcart').body != undefined)
Ext.getCmp('supplies_tab_shoppingcart').doAutoLoad();
}
}
},{
id: 'supplies_tab_orderstatus',
iconCls: 'icon_lorry',
contentEl: 'tabs',
padding: '10 10 10 10',
title: 'Order status',
closable: false,
autoLoad:
{
url: 'view/supplies/order_status.html.php',
scripts: true
},
listeners:
{
'activate': function()
{
if (Ext.getCmp('supplies_tab_orderstatus').body != undefined)
Ext.getCmp('supplies_tab_orderstatus').doAutoLoad();
}
}
},{
id: 'supplies_tab_orderhistory',
iconCls: 'icon_clock',
contentEl: 'tabs',
padding: '10 10 10 10',
title: 'History',
closable: false,
autoLoad:
{
url: 'view/supplies/order_history.html.php',
scripts: true
},
listeners:
{
'activate': function()
{
if (Ext.getCmp('supplies_tab_orderhistory').body != undefined)
Ext.getCmp('supplies_tab_orderhistory').doAutoLoad();
}
}
}]
});


Secondly....

Every first time the tab content is loaded I get the following error...


'Ext.fly(...)' is null or not an object

There are a lot of topics about this error, but none of them provide a solution. I'm unable to solve the error. Even though it's not realy a problem because everything works as expected.


Thanks a lot!