Results 1 to 6 of 6

Thread: Problem to show content of TabPanel in IE8

  1. #1
    Sencha User
    Join Date
    Apr 2008
    Posts
    22

    Default Problem to show content of TabPanel in IE8

    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/xNaviga...DEMO/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>

  2. #2
    Sencha Premium User mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    3,153

    Default

    If you want help, you should post your code in code tags and make sure it's properly indented. It's completely unreadable!

  3. #3
    Sencha User
    Join Date
    Apr 2008
    Posts
    22

    Default

    Hi mankz,

    Thanks for the tip, here you are:

    HTML 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>
    <!--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>

  4. #4
    Sencha User
    Join Date
    Apr 2008
    Posts
    22

    Default

    You can run the code specified above with this link:
    http://65.23.40.4:89/db2web2/xNaviga...DEMO/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.

  5. #5
    Sencha User
    Join Date
    Apr 2008
    Posts
    22

    Default

    Mankz, do you have any idea or direction?

  6. #6
    Sencha Premium User mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    3,153

    Default

    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.

Similar Threads

  1. Problem adding content with grid in tabpanel
    By rakesh in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 6 Apr 2009, 8:34 PM
  2. Problem in tabpanel with multiple tabs content having same field id..
    By rakesh in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 12 Oct 2008, 4:15 AM
  3. tabPanel content layout problem
    By wiulma in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 9 Sep 2008, 7:57 AM
  4. problem, loading tabpanel content -_-"
    By pokeepers in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 24 Mar 2008, 6:59 PM
  5. problem in having formpanel show within a tabpanel
    By athaneumlibrary in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 2 Jan 2008, 3:54 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •