[SOLVED] Nested tabpanel not rendering

[djfiii]

I'm using a tab panel with dynamic tabs, and previously each was just autoLoading a url. I'm trying to modify it such that each dynamic tab now has, in addition to the autoLoad content, a nested tab panel with 5 tabs that aligns to the bottom of the parent tab panel. The problem is that the nested tab panel doesn't render at all. I tried removing the autoLoad from parent tabs so the only content would be the nested tab panel, but same result. A funny thing I noticed though - if I resize the browser (i.e. maximize or unmaximize) it renders. I'm guessing that the resize fires whatever function it is that I need to be firing when I create this thing, but I have no idea what that is. I looked through the docs, but now I'm stuck.

"tp" is the already existing parent tabpanel, and "fdtp" is the newly created child tab panel. Here is my code:



function addFDTab(fID){
var fdtp = new Ext.TabPanel({
activeTab: 0,
width:600,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Normal Tab',
html: "My content was added during construction."
},{
title: 'Ajax Tab 1',
html: "My content was added during construction."
},{
title: 'Ajax Tab 2',
html: "My content was added during construction."
},{
title: 'Event Tab',
html: "I am tab 4's content. I also have an event listener attached."
},{
title: 'Disabled Tab',
disabled:true,
html: "Can't see me cause I'm disabled"
}
]
});

tp.add({
title: fID,
iconCls: 'tabImg',
id: 'tab' + fID,
/*
autoLoad: {
url: 'findings-detail.asp',
params: 'fID='+fID,
method: 'POST'
},
*/
closable:true,
items: [fdtp]
}).show();

}

[devnull]

After calling add() on the parent tabPanel, call doLayout() on it as well. Adding layoutOnTabChange: true to it may help as well.

[djfiii]

Yea, I tried that before posting and no such luck. Is this perhaps a bug?

[devnull]

It rendering when resizing the browser says that its a layout issue somewhere, are you sure you are calling doLayout on the right object(s)?

[djfiii]

scratch that - not a bug. didn't think this would make a difference but I removed the [] brackets from the items collection, so:

items: fdtp

as well as temporarily removed the autoload, and it works fine. I'm now playing with adding a separate panel which will contain the autoload, so I'm expecting my items collection to be something like:

items: [newPanel, fdtp]

we'll see!

[djfiii]

Solved. I added a panel to contain the autoLoad. Having an autoLoad for a tabPanel, as well as trying to add a component to the items collection was doing screwy stuff. The solution was to create a panel for the autoload, then pass both the panel and the child tabPanel to the items collection of the parent tabPanel. Code as follows:


function addFDTab(fID){
var fdtp = new Ext.TabPanel({
activeTab: 0,
height:250,
width: 600,
//layoutOnTabChange: true,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Normal Tab',
html: "My content was added during construction."
},{
title: 'Ajax Tab 1',
html: "My content was added during construction."
},{
title: 'Ajax Tab 2',
html: "My content was added during construction."
},{
title: 'Event Tab',
html: "I am tab 4's content. I also have an event listener attached."
},{
title: 'Disabled Tab',
disabled:true,
html: "Can't see me cause I'm disabled"
}
]
});

var p = new Ext.Panel({
layout:'fit',
border: false,
autoLoad: {
url: 'findings-detail.asp',
params: 'fID='+fID,
method: 'POST'
}
});

tp.add({
title: fID,
bodyStyle : 'padding:5px',
iconCls: 'tabImg',
id: 'tab' + fID,
closable:true,
items: [p,fdtp]
}).show();

tp.doLayout();
}

[Animal]

What layout is the "title: fID," Panel supposed to use?

As you have it now, it has no layout, and so no sizing of its child items will be performed. Are you OK with that?

And what does findings-detail.asp return? Is it nothing but script? Which renders something?

[djfiii]

tp was previously defined as:


window.tp = new Ext.TabPanel({
renderTo: 'center',
id: 'findingTabPanel',
activeTab: 0,
height: Ext.get('content').getHeight() - 12,
plain: true,
fitToFrame:true,
autoScroll:true,
items: [{
title: 'Findings',
fitToFrame:true,
autoScroll:true,
autoLoad: {
url: 'findings-list.asp',
callback: function(){
Ext.get('findingsTable').setWidth(Ext.get('center').getWidth() - 20);
}
}
}]
});


can you elaborate a bit on what the implications of my current setup are? I do the following:

1) create the parent tabPanel with the initial tab that autoloads a list of data - each with a link that calls "addFDTab(fID)" (see screenshot)

2) addFDTab does what you see above - adds a tab to the parent tabPanel. This new tab contains both a panel that autoLoads findings-detail.asp, and loads the child tabpanel. The child tabpanel has 5 tabs - each autoloads a particular asp file and passess fID as a param.

[Animal]

What does findings-list.asp return? If it is not straight HTML content, then why use a Panel as a vehicle for executing script?

[djfiii]

It's straight html content. if you look at that second ss (i know it's hard to see), it shows a list with a column of icons to the right. One of those icons fires addFDTab and opens up a detail tab, which you can see in ss1.