PDA

View Full Version : Tab in Tab content will be not shown



metan
1 Jun 2011, 3:32 AM
Dear all,

I have a tab in a tab, mainTab and subTab.
mainTab has 4 tabs and loads via ajax a simple navigation and a div-id-holder.
If this navigation will be clicked subTab with a grid and edit-form will be loaded.

The problem is now, that this works fine in the first tab of mainTab, but if the mainTab will be changed, the subTab will be loaded but not shown.
Firebug show everything in the console, but it will be not shown in the browser itself.

Using of disableCaching or else does not help.

The source code is hughe for posting it here.

Thanks for helping.

Regrads
metan

skirtle
1 Jun 2011, 5:21 AM
Without any source code we're really going to struggle to help you. Reducing your complex code down to a simple test case is a key part of the investigative process; you'll probably figure out what the problem is without even needing to post it here.

You may also find it helpful to dig in with Firebug to figure out why the elements aren't showing up. It'll probably be because a container element is 'display: none' or 'height: 0'. It would help greatly to have that information.

Speculating wildly, have you tried the layoutOnTabChange config option?

friend
1 Jun 2011, 5:41 AM
Also be sure that you have activeTab: 0 for all TabPanel instances. Otherwise, you'll see no content when the TabPanels are rendered.

I don't know if you'll find this helpful, but here's a functional example of a TabPanel with child TabPanels that appear to work as expected (where static content is used in the child tabpanels for simplicity):



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-blue.css" id="theme" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />

<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.QuickTips.init();

var txt = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.';

var tab1 = {
xtype: 'panel',
title: 'Tab 1',
items: [{
xtype: 'tabpanel',
activeTab: 0,
items: [{
xtype: 'panel',
title: 'SubTab 1 - 1',
html: txt
},{
xtype: 'panel',
title: 'SubTab 1 - 2',
html: txt
},{
xtype: 'panel',
title: 'SubTab 1 - 3',
html: txt
}]
}]
};

var tab2 = {
xtype: 'panel',
title: 'Tab 2',
items: [{
xtype: 'tabpanel',
activeTab: 0,
items: [{
xtype: 'panel',
title: 'SubTab 2 - 1',
html: txt
},{
xtype: 'panel',
title: 'SubTab 2 - 2',
html: txt
},{
xtype: 'panel',
title: 'SubTab 2 - 3',
html: txt
}]
}]
};

var tab3 = {
xtype: 'panel',
title: 'Tab 3',
items: [{
xtype: 'tabpanel',
activeTab: 0,
items: [{
xtype: 'panel',
title: 'SubTab 3 - 1',
html: txt
},{
xtype: 'panel',
title: 'SubTab 3 - 2',
html: txt
},{
xtype: 'panel',
title: 'SubTab 3 - 3',
html: txt
}]
}]
};

var tabpanel = {
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
items: [tab1, tab2, tab3]
};

var viewport = new Ext.Viewport({
layout: 'border',
items: [{
xtype: 'panel',
region: 'north',
frame: true,
height: 70,
html: '<span style="font-size: 24px;">Tabs Gonna Tab </span>',
title: 'North Region'
},
tabpanel
,{
xtype: 'panel',
region: 'south',
frame: true,
height: 50,
html: '&copy;2011, MonkeyPooperMan, Inc.',
title: 'South Region'
}]
});
});
</script>
</head>
<body>
</body>
</html>

metan
1 Jun 2011, 5:48 AM
Hi,

Here is my source code

MainTab:


<script type='text/javascript'>
var mainEditTabs;
Ext.onReady(function(){
mainEditTabs=new Ext.TabPanel({
renderTo:'mainEditTabs',
autoWidth:true,
activeTab:'###ACTIVE_TAB###',
plain:true,
hideBorders:true,
border:false,
xtype:'iframepanel',
frame:true,
defaults:{autoHeight:true},
items:[
{contentEl:'idMainEditDasboardTab',
itemId:'idMainEditDasboard',
title:'Start',
listeners:{
activate:function(tabPanel,newTab){
Ext.shWaitingBox();
tabPanel.getUpdater().update({
url:'index.php',
params:function() {
var parameter='eID=shEditViewMainTab&tx_extshmainfe_pi1[shEditViewMainTab]=dashboard';
return parameter;
},
scripts: true
});
},
}},
{contentEl:'idMainEditExtrasTab',
itemId:'idMainEditExtras',
title:'Angebote',
listeners:{
activate:function(tabPanel,newTab){
Ext.shWaitingBox();
tabPanel.getUpdater().update({
url:'index.php',
params:function() {
var parameter='eID=shEditViewMainTab&tx_extshmainfe_pi1[shEditViewMainTab]=extras';
return parameter;
},
scripts: true
});
}
}
},
{contentEl:'idMainEditPortraitTab',
itemId:'idMainEditPortrait',
title:'Portrait-Inhalte bearbeiten',
listeners:{
activate:function(tabPanel,newTab){
Ext.shWaitingBox();
tabPanel.getUpdater().update({
url:'index.php',
params:function() {
var parameter='eID=shEditViewMainTab&tx_extshmainfe_pi1[shEditViewMainTab]=portrait';
return parameter;
},
scripts: true
});
}
}
},
{contentEl:'idMainEditMembershipTab',
itemId:'idMainEditMembership',
title:'Mitgliedschaft',
listeners:{
activate:function(tabPanel,newTab){
Ext.shWaitingBox();
tabPanel.getUpdater().update({
url:'index.php',
params:function() {
var parameter='eID=shEditViewMainTab&tx_extshmainfe_pi1[shEditViewMainTab]=membership';
return parameter;
},
scripts: true
});
}
}}
]
});
});
</script>
<div class="span-1">&nbsp;</div>
<div class="span-22">
<h1>###HEADER###</h1>
<p>###WELCOME###</p>
<div id="mainEditTabs">
<div id="idMainEditDasboardTab" class="x-hide-display"></div>
<div id="idMainEditExtrasTab" class="x-hide-display"></div>
<div id="idMainEditPortraitTab" class="x-hide-display"></div>
<div id="idMainEditMembershipTab" class="x-hide-display"></div>
</div>
</div>
<div class="span-1">&nbsp;</div><hr /><div class="clearboth"></div>
Here the subTab code (there 12 differen content elements with same js, diff. parametes):


<br /><h2>Gutscheine</h2><br />
<div id="subTabsEditView">
<div id="idEditListViewTab" class="x-hide-display"></div>
<div id="idEditInsertViewTab" class="x-hide-display"></div>
</div>
<script type='text/javascript'>
var subTabsEditView;
var idForEdit=0;
var toDoAction='';
Ext.onReady(function(){
subTabsEditView=new Ext.TabPanel({
renderTo:'subTabsEditView',
autoWidth:true,
activeTab:0,
plain:true,
hideBorders:true,
border:false,
//xtype:'iframepanel' ,
//frame:true,
defaults:{autoHeight:true},
enableTabScroll : true,
//resizeTabs : true,
minTabWidth : 75,
items:[
{contentEl:'idEditListViewTab',
itemId:'idEditListView',
title:'Auflisten',
listeners:{
activate:function(tabPanel,newTab){
Ext.shWaitingBox();
tabPanel.getUpdater().update({
url:'index.php',
params:function() {
var parameter='eID=shEditView&tx_extshmainfe_pi1[shEditVar]=coupon&tx_extshmainfe_pi1[view]=listview';
return parameter;
},
scripts: true
});
}
}
},
{contentEl:'idEditInsertViewTab',
itemId:'idEditInsertView',
title:'Neu Eintragen / Editieren',
listeners:{
activate:function(tabPanel,newTab){
Ext.shWaitingBox();
tabPanel.getUpdater().update({
url:'index.php',
params:function() {
var parameter='eID=shEditView&tx_extshmainfe_pi1[shEditVar]=coupon&tx_extshmainfe_pi1[view]=insertNew';
if(idForEdit!=0 && idForEdit!=''){
parameter=parameter+'&tx_extshmainfe_pi1[idForEdit]='+idForEdit;
if(idForEdit > 0){
idForEdit=0;
}
else{
idForEdit='';
}
}
if(toDoAction!=''){
parameter=parameter+'&tx_extshmainfe_pi1[toDoAction]='+toDoAction;
toDoAction='';
}
return parameter;
},
scripts: true
});
}
}
}
]
});
});</script>
###ACTIVE_TAB### will be overwritten via php. so this is always set by the name of the tab id.

For loading the subTab, i use a navigation (will be loaded by the mainTab) with this function:

[CODE]
//Get the modul via ajax for editing its content
function getShEditVar(shEditVar, idShEditVar) {
var url = "index.php";
var params = "eID=shEditView&tx_extshmainfe_pi1[shEditVar]=" + shEditVar;
var idShEditVarDOM = Ext.get(idShEditVar);
idShEditVarDOM.getUpdater().update({
url: url,
params: params,
scripts: true,
callback: function(el, success, response, options) {
if(response.responseText.length > 0){
idShEditVarDOM.show();
}
else {
alert('ERROR');
}
}
});
}
[CODE]

Thanks for your help.

Metan

skirtle
1 Jun 2011, 6:54 PM
Reducing your complex code down to a simple test case is a key part of the investigative process; you'll probably figure out what the problem is without even needing to post it here.

That's far too much code for us to be able to figure out what the problem is. If I try to run that locally it'll take me hours to get it to work.

A few things that caught my eye. Your TabPanel has an xtype of 'iframepanel', which doesn't seem right. autoHeight and contentEl are both potential candidates for the problems you're seeing. Overall the way your doing this seems excessively complicated, I'd advise ditching all of the contentEl stuff, just have the renderTo on the outermost component with an explicitly set height.

metan
2 Jun 2011, 3:54 AM
Hi,

I have tried all your suggestion and there is still the same problem.
After switching to an other tab the next loaded + grid will be not shown, but normal html will be shown.

I have send you a private message. Please give me a short answer.

Thank you in advance.

Metan

metan
4 Jun 2011, 2:01 AM
It works now.
I use for every tab its own div-id.

Thanks to all.
metan