Mar 22, 2011, 1:12 PM
this.innerHd.firstChild is null when updating panel to fast.
Hi,
I've got a problem with ext in IE.
I use a border layout, where the left column contains links, which when clicked on wil update the center region. The center region contains at least 5 panels (called modules in my application), which have an autoload url. So when the center region is updated by the updater() function provided by ext, the modules in the center region will update themselves when loaded. Problem is, when clicking links in the west panel fast enough this will result in a javascript error in IE stating "this.innerHd.firstChild is null or not on object".
I can't find anyone else with the same problem. It seems to happen when clicking the second time shortly after the first click, the center region get's reloaded, while some panels are still being build by ext.
If someone can point me in the right direction :). If you need more info, let me know?Here's my layout code:
I've got a problem with ext in IE.
I use a border layout, where the left column contains links, which when clicked on wil update the center region. The center region contains at least 5 panels (called modules in my application), which have an autoload url. So when the center region is updated by the updater() function provided by ext, the modules in the center region will update themselves when loaded. Problem is, when clicking links in the west panel fast enough this will result in a javascript error in IE stating "this.innerHd.firstChild is null or not on object".
I can't find anyone else with the same problem. It seems to happen when clicking the second time shortly after the first click, the center region get's reloaded, while some panels are still being build by ext.
If someone can point me in the right direction :). If you need more info, let me know?Here's my layout code:
var ext_11 = new Ext.Panel({
id: "layout",
layout: "border",
bodyBorder: false,
frame: true,
renderTo: "layoutDiv",
style: "margin-left : auto; margin-right : auto; text-align : left;",
hideBorder: true,
border: false,
width: 1000,
bodyStyle: "background-color: #EEEEEE;",
items: [{
region: "north",
height: 163,
items: [{
id: "header",
height: 125,
html: "<a href="
arm "><img src="
gfx / armlogo.gif " /></a>"
}, {
id: "navigation",
layout: "hbox",
cls: "x-panel-navigation",
style: "padding-top:7px",
items: [{
new Ext.TabPanel({
itemTpl: new Ext.Template("<li class=" {
cls
}
" id=" {
id
}
">", "<a class="
x - tab - right " href="#" onclick="
return false;
"><em class="
x - tab - left ">", "<span class="
x - tab - strip - inner " style="
height: 30px;
">",
"<span class="
x - tab - strip - text {
iconCls
}
" style="
padding - left: 26px;margin - top: 2px;font - family: Verdana;font - size: 14px;
">{text}</span>",
"</span>",
"</a></em></li>",
{
_arguments: ["<li class=" {
cls
}
" id=" {
id
}
">", "<a class="
x - tab - right " href="#" onclick="
return false;
"><em class="
x - tab - left ">", "<span class="
x - tab - strip - inner " style="
height: 30px;
">",
"<span class="
x - tab - strip - text {
iconCls
}
" style="
padding - left: 26px;margin - top: 2px;font - family: Verdana;font - size: 14px;
">{text}</span>",
"</span>",
"</a></em></li>"]
}),
id: "leftNavigation",
cls: "x-panel-left-navigation",
activeTab: 0,
width: 560,
tabWidth: 160,
resizeTabs: true,
ignore: false,
listeners: {
tabchange: function (tabs, panel) {
if (typeof(firstChange) == 'undefined') firstChange = true;
var other = Ext.getCmp('rightNavigation')
if (panel != undefined) {
if (other.getActiveTab() != null) {
if (!tabs.ignore) {
other.ignore = true;
other.setActiveTab(false);
other.activeTab = null;
other.ignore = false;
}
}
if (firstChange) {
firstChange = false;
} else {
Adw.update('content', panel.url, tabs.activeTab.getId());
}
}
}
},
items: [{
title: "Home",
url: "arm\/",
iconCls: "x-navigation-tabs-home"
}, {
title: "Queue",
url: "arm\/search\/?SearchOption=Q",
iconCls: "x-navigation-tabs-queue"
}, {
title: "Complaints",
url: "arm\/search\/?SearchOption=I",
iconCls: "x-navigation-tabs-complaints"
}, {
title: "Report",
url: "arm\/index\/report",
iconCls: "x-navigation-tabs-report"
}]
})
}, {
new Ext.TabPanel({
itemTpl: new Ext.Template("<li class=" {
cls
}
" id=" {
id
}
">", "<a class="
x - tab - right " href="#" onclick="
return false;
"><em class="
x - tab - left ">", "<span class="
x - tab - strip - inner " style="
height: 30px;
">",
"<span class="
x - tab - strip - text {
iconCls
}
" style="
padding - left: 26px;margin - top: 2px;font - family: Verdana;font - size: 14px;
">{text}</span>",
"</span>",
"</a></em></li>",
{
_arguments: ["<li class=" {
cls
}
" id=" {
id
}
">", "<a class="
x - tab - right " href="#" onclick="
return false;
"><em class="
x - tab - left ">", "<span class="
x - tab - strip - inner " style="
height: 30px;
">",
"<span class="
x - tab - strip - text {
iconCls
}
" style="
padding - left: 26px;margin - top: 2px;font - family: Verdana;font - size: 14px;
">{text}</span>",
"</span>",
"</a></em></li>"]
})
}, id: "rightNavigation",
width: 540,
tabWidth: 140,
resizeTabs: true,
ignore: false,
style: "margin-left:288px",
listeners: {
tabchange: function (tabs, panel) {
if (typeof(firstChange) == 'undefined') firstChange = true;
var other = Ext.getCmp('leftNavigation')
if (panel != undefined) {
if (other.getActiveTab() != null) {
if (!tabs.ignore) {
other.ignore = true;
other.setActiveTab(false);
other.activeTab = null;
other.ignore = false;
}
}
if (firstChange) {
firstChange = false;
} else {
Adw.update('content', panel.url, tabs.activeTab.getId());
}
}
}
},
items: [{
title: "What's New",
url: "arm\/module\/releasehistory",
iconCls: "x-navigation-tabs-whatsnew"
}]
})
}]
}]
},
{
region: "west",
id: "leftcolumn",
header: false,
baseCls: "x-arm-sidepanel",
width: 227,
collapsible: true,
autoScroll: false,
frame: true,
defaults: {
width: 218,
style: "margin-left:5px;background-color:#eeeeee"
},
items: [{
style: "margin-left: 10px;text-align:right;background-color:#eeeeee",
html: "<div class="
x - widescreen "><a href="#" onclick="
Ext.getCmp('leftcolumn').toggleCollapse();
return false;
">Widescreen <<</a></div>"
}, {
cls: "layout-panel",
iconCls: "layout-panel-icon-message",
title: "Message",
id: "message",
collapsible: true,
titleCollapse: true,
padding: "4px 4px 4px 4px",
frame: true
}, {
html: "<br \/>"
}, {
id: "functions",
cls: "layout-panel",
iconCls: "layout-panel-icon-functions",
title: "Functions",
collapsible: true,
titleCollapse: true,
frame: true,
padding: "4 4 4 4"
}, {
html: "<br \/>"
}, {
id: "lastViewed",
cls: "layout-panel",
iconCls: "layout-panel-icon-lastViewed",
title: "Last Viewed",
collapsible: true,
titleCollapse: true,
padding: "4 4 4 4",
frame: true
}]
},
{
region: "east",
id: "rightcolumn",
baseCls: "x-arm-sidepanel",
header: false,
width: 227,
collapsible: true,
autoScroll: false,
frame: true,
bodyCfg: {
cls: "x-panel-body222"
},
defaults: {
width: 218,
style: "margin-left: 5px;background-color:#eeeeee"
},
items: [{
style: "text-align:left;background-color:#eeeeee",
html: "<div class="
x - widescreen "><a onclick="
Ext.getCmp('rightcolumn').toggleCollapse();
return false;
" href="">Widescreen >></a></div>"
},
new Ext.Panel({
padding: "6px 6px 6px 6px",
id: "SideSearchPanel",
cls: "layout-panel",
iconCls: "layout-panel-icon-search",
name: "SearchPanel",
title: "Search",
collapsible: true,
titleCollapse: true,
frame: true
}) {
html: "<br />"
}, {
id: "myActions",
cls: "layout-panel",
iconCls: "layout-panel-icon-myActions",
title: "My Actions",
collapsible: true,
titleCollapse: true,
frame: true,
padding: "4px 4px 4px 4px"
}]
},
{
region: "center",
style: "background-color: #e4effc;overflow-x:hidden;margin-top:24px",
id: "content",
header: true,
title: "loading",
autoScroll: false,
margins: "0 0 0 0",
padding: "0 0 0 0"
}]
});
Originally Posted by Daniil
