PDA

View Full Version : Problem to show content of TabPanel in IE8



pp2
3 Apr 2011, 4:45 AM
Hi Everyone,

I have a problem with TabPanel show or focus or refresh.
On FF its works, I see the content of the Tab normally but not on IE8.
The content of the Tab exists but it is not shown in IE8 unless I do a resize of the frame containing the Tab.

I have my TabPanels within a viewPort with a TreePanel.
I have spend hours without any solutions, any help will be welcomed :)

Here the live link:
http://65.23.40.4:89/db2web2/xNavigationMenu/USERDEMO/index.php

Here my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Your Title</title>
<!--Cache not used-->
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<meta name="creation-date" content="28/12/2009">
<meta name="creation-time" content="19:07:34">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!--LIBS JS-->
<!--EXT-->
<script type="text/javascript" src="../../xLIBS/ext-3.1.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../xLIBS/ext-3.1.0/ext-all.js"></script>
<script type="text/javascript" src="../../xLIBS/ext-3.1.0/resources/locale/ext-lang-en.js"></script>
<script type="text/javascript" src="../../xLIBS/extXtra/Ext.ux.Toast.js"></script>
<!--FIN LIBS JS-->
<!--CSS-->
<link rel="stylesheet" type="text/css" href="../../xLIBS/ext-3.1.0/resources/css/ext-all.css">
<!--FIN CSS-->
<script type="text/javascript" src="../../xAction/signon.js"></script>
<script type="text/javascript">
var myTabs=function(){
this.tpPtr=null
this.portal=null
this.updatePortal=function(){
ptr.portal.add({
title: "Your WebSite Title",
height: 550,
collapsible: true,
margins: "5 5 5 5",
draggable: true,
html: "<iframe frameborder=0 border=0 width='100%' height='100%' src='http://www.db2web2.com'>Loading....</iframe>"
})
}
this.openPortal=function(){
ptr.portal=new Ext.Panel({title: "your website"})
ptr.portal.on('render',ptr.updatePortal)
ptr.tpPtr.add(ptr.portal).show()
}

this.openTab=function(node){
var a=node.attributes.custom
var url=a.url
if(a.params !=''){url=a.url+"?"+a.params+"&target="+a.target;}
ptr.tpPtr.add({
layout: 'fit',
title: node.text,
html: "<iframe frameborder=0 border=0 width='100%' height='100%' src='"+url+"'>Loading....</iframe>"
}).show()

}
this.beforeRemove=function(tp,tab){
Ext.Msg.confirm("confirmation","Merci de confirmer",function(r){return(r=='yes' ? true : false)})
return false
}
this.beforeAdd=function(tp,tab,index){
for(var i=0;i<tp.items.items.length;i++)
if(tp.items.items[i].title==tab.title){
tp.items.items[i].show();
}
return true
}

this.create=function(){
ptr.tpPtr=new Ext.TabPanel({
//autoScroll: false,
height: 300,
region: 'center',
id: 'monTabPanel',
activeTab: 0,
hideMode:'offsets',
border: false,
bodyStyle: 'padding: 5px',
border: true,
plain: true,
margins: '5 5 5 0',
defaults:{closable: true},
listeners:{
'beforeadd': tabs.beforeAdd
}
})
return ptr.tpPtr
}
var ptr=this
return true
}

var menuTree=function(){
this.currentNode=null
this.accData=null
this.clickEv=function(node){
if(!node.isLeaf())
return false
ptr.currentNode=node
tabs.openTab(node)
}
this.getAcc=function(callback){
Ext.Ajax.request({
url: "../getAcc.php",
method: 'GET',
success: function(resp){
var r=Ext.decode(resp.responseText)
ptr.accData=r.data
callback()
return true
}
})
}
this.drawMenus=function(){
for(var i=0,m=[];i<ptr.accData.length;i++){
m.push({
title: ptr.accData[i].MNULBL.bold(),
items: new Ext.tree.TreePanel({
id: ptr.accData[i].MNUID,
useArrows: true,
autoScroll: false,
animate: true,
enableDD: false,
loader: new Ext.tree.TreeLoader({url: '../getTree.php'}),
rootVisible:false,
expanded: false,
border: false,
listeners:{'click': mt.clickEv},
root: new Ext.tree.AsyncTreeNode({
id: ptr.accData[i].MNUID,
defaults:{singleClickExpand: true}
})
})
})
}
return m
}
var ptr=this
return true
}
var APP=function(){
this.vp=null
this.render=function(){
ptr.vp=new Ext.Viewport({
layout: 'fit',
onRender: tabs.openPortal,
items:{
layout: 'border',
border: false,
items: [
tabs.create(),{
title: 'Menu',
collapsible: true,
collapseMode:'mini',
region: 'west',
layout: 'border',
width: 200,
margins: '5 0 5 5',
split: true,
items: [{
region: "center",
layout: 'accordion',
layoutConfig:{animate: true,fill: false},
border: false,
defaults:{border: false},
items: mt.drawMenus()
},{
region: "south",
height: 120,
border: false,
bodyStyle: 'padding: 4px; background-color: white',
items: [{
id: 'drebin',
frame: true,
bodyStyle: 'text-align: center',
html: "<img width='145' src='../yourlogo.jpg' >"
}]
}
]
}
]
}
})
}
this.start=function(){
// no signon
mt.getAcc(app.render)

// signon
// pop_SIGNON();

return true
}
var ptr=this
return true
}
var app=new APP()
var mt=new menuTree()
var tabs=new myTabs()
Ext.onReady(app.start)
</script>
</head>
<body>
</body>
</html>

mankz
3 Apr 2011, 6:13 AM
If you want help, you should post your code in code tags and make sure it's properly indented. It's completely unreadable!

pp2
3 Apr 2011, 3:45 PM
Hi mankz,

Thanks for the tip, here you are:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Your Title</title>
<!--Cache not used-->
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<meta name="creation-date" content="28/12/2009">
<meta name="creation-time" content="19:07:34">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!--LIBS JS-->
<!--EXT-->
<script type="text/javascript" src="../../xLIBS/ext-3.1.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../xLIBS/ext-3.1.0/ext-all.js"></script>
<script type="text/javascript" src="../../xLIBS/ext-3.1.0/resources/locale/ext-lang-en.js"></script>
<script type="text/javascript" src="../../xLIBS/extXtra/Ext.ux.Toast.js"></script>
<!--script type="text/javascript" src="http://extjs.com/deploy/dev/examples/portal/Portal.js"></script-->
<!--script type="text/javascript" src="http://extjs.com/deploy/dev/examples/portal/PortalColumn.js"></script-->
<!--FIN LIBS JS-->
<!--CSS-->
<link rel="stylesheet" type="text/css" href="../../xLIBS/ext-3.1.0/resources/css/ext-all.css">
<!--FIN CSS-->
<script type="text/javascript" src="../../xAction/signon.js"></script>
<script type="text/javascript">
var myTabs=function(){
this.tpPtr=null
this.portal=null
this.updatePortal=function(){
ptr.portal.add({
title: "Your WebSite Title",
height: 550,
collapsible: true,
margins: "5 5 5 5",
draggable: true,
html: "<iframe frameborder=0 border=0 width='100%' height='100%' src='http://www.db2web2.com'>Loading....</iframe>"
})
}
this.openPortal=function(){
ptr.portal=new Ext.Panel({title: "your website"})
ptr.portal.on('render',ptr.updatePortal)
ptr.tpPtr.add(ptr.portal).show()
}

this.openTab=function(node){
var a=node.attributes.custom
var url=a.url
if(a.params !=''){url=a.url+"?"+a.params+"&target="+a.target;}
ptr.tpPtr.add({
layout: 'fit',
title: node.text,
html: "<iframe frameborder=0 border=0 width='100%' height='100%' src='"+url+"'>Loading....</iframe>"
}).show()

}
this.beforeRemove=function(tp,tab){
Ext.Msg.confirm("confirmation","Merci de confirmer",function(r){return(r=='yes' ? true : false)})
return false
}
this.beforeAdd=function(tp,tab,index){
for(var i=0;i<tp.items.items.length;i++)
if(tp.items.items[i].title==tab.title){
tp.items.items[i].show();
}
return true
}

this.create=function(){
ptr.tpPtr=new Ext.TabPanel({
autoScroll: false,
deferredRender: true,
height: 300,
region: 'center',
id: 'monTabPanel',
activeTab: 0,
hideMode:'offsets',
border: false,
bodyStyle: 'padding: 5px',
border: true,
plain: true,
margins: '5 5 5 0',
defaults:{closable: true},
listeners:{
'beforeadd': tabs.beforeAdd
}
})
return ptr.tpPtr
}
var ptr=this
return true
}

var menuTree=function(){
this.currentNode=null
this.accData=null
this.clickEv=function(node){
if(!node.isLeaf())
return false
ptr.currentNode=node
tabs.openTab(node)
}
this.getAcc=function(callback){
Ext.Ajax.request({
url: "../getAcc.php",
method: 'GET',
success: function(resp){
var r=Ext.decode(resp.responseText)
ptr.accData=r.data
callback()
return true
}
})
}
this.drawMenus=function(){
for(var i=0,m=[];i<ptr.accData.length;i++){
m.push({
title: ptr.accData[i].MNULBL.bold(),
items: new Ext.tree.TreePanel({
id: ptr.accData[i].MNUID,
useArrows: true,
autoScroll: false,
animate: true,
enableDD: false,
loader: new Ext.tree.TreeLoader({url: '../getTree.php'}),
rootVisible:false,
expanded: false,
border: false,
listeners:{'click': mt.clickEv},
root: new Ext.tree.AsyncTreeNode({
id: ptr.accData[i].MNUID,
defaults:{singleClickExpand: true}
})
})
})
}
return m
}
var ptr=this
return true
}
var APP=function(){
this.vp=null
this.render=function(){
ptr.vp=new Ext.Viewport({
layout: 'fit',
onRender: tabs.openPortal,
items:{
layout: 'border',
border: false,
items: [
tabs.create(),{
title: 'Menu',
collapsible: true,
collapseMode:'mini',
region: 'west',
layout: 'border',
width: 200,
margins: '5 0 5 5',
split: true,
items: [{
region: "center",
layout: 'accordion',
layoutConfig:{animate: true,fill: false},
border: false,
defaults:{border: false},
items: mt.drawMenus()
},{
region: "south",
height: 120,
border: false,
bodyStyle: 'padding: 4px; background-color: white',
items: [{
id: 'drebin',
frame: true,
bodyStyle: 'text-align: center',
html: "<img width='145' src='../yourlogo.jpg' >"
}]
}
]
}
]
}
})
}
this.start=function(){
// no signon
mt.getAcc(app.render)

// signon
// pop_SIGNON();

return true
}
var ptr=this
return true
}
var app=new APP()
var mt=new menuTree()
var tabs=new myTabs()
Ext.onReady(app.start)
</script>
</head>
<body>
</body>
</html>

pp2
4 Apr 2011, 3:16 AM
You can run the code specified above with this link:
http://65.23.40.4:89/db2web2/xNavigationMenu/USERDEMO/index.php

If you click the menu-items you will see a new tab.
The content will appear automatically with FF but not with IE8.
The issue is that the content is not shown with IE8 but it exists, if you do "resize" a frame you will see it.

pp2
14 Apr 2011, 9:06 AM
Mankz, do you have any idea or direction?

mankz
14 Apr 2011, 11:03 PM
Not really :/. It's far too much code to delve into, try to isolate the problem by removing code and then report if you still cannot figure it out.