PDA

View Full Version : Putting a Tabpanel in a Tabpanel tab



w011117
5 Feb 2008, 6:05 PM
Hello,
I am trying to test putting a tabpanel in the tab of another tabpanel and am not having too much success.
Can someone please tell me what I am doing wrong?
My test code is shown below:



//======================= Test2 DIV ===================================
tab_div2 = new Ext.TabPanel({
renderTo:'test2', // just a ordinary DIV
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
deferredRender: true,
enableTabScroll:true,
width:600,
height:250,
defaults: {autoScroll:true}
});

// tab generation code
var index = 0;
while(index < 2){
addTab();
}

var index2 = 0;
while(index2 < 2) {
addTab2();
}


function addTab(){
tab_div2.add({
title: 'New Tab ' + (++index),
iconCls: 'tabs',
html: 'Tab Body ' + (index) + '<br/><br/>',
closable:true
}).show();
}

function addTab2(){
tab_div2.add(new Ext.TabPanel({
activeTab: 0,
resizeTabs:true,
plain: true,
tabPosition: 'footer',
deferredRender: true,
enableTabScroll:true,
width:150,
height:400,
items:[{
title: 'First Tab' + (++index2),
html: "First Tab text"
},{
title: 'Second Tab' + (++index2),
html: 'Second Tab text'
}],
defaults:{autoScroll: true},
})
).show();
tab_div2.doLayout();

}

new Ext.Button({
text: 'Add Tab',
handler: addTab2,
iconCls:'new-tab'
}).render('test2');




}); // End onReady Event code


Thanks,
T

w011117
5 Feb 2008, 10:52 PM
Sorry,
Forgot to include the error message.
The error message and stack from Firebug is:



this[ce] has no properties
autoSizeTabs()ext-all-debug.js (line 18724)
delegateUpdates()ext-all-debug.js (line 18714)
onResize()ext-all-debug.js (line 18675)
setSize(150, 400)ext-all-debug.js (line 13290)
afterRender()ext-all-debug.js (line 13408)
afterRender()ext-all-debug.js (line 15932)
afterRender()ext-all-debug.js (line 18486)
render(Object dom=div#ext-gen29.x-tab-panel-body id=ext-gen29, undefined)ext-all-debug.js (line 12263)
render()ext-all-debug.js (line 13807)
render()ext-all-debug.js (line 18442)
renderItem(Object initialConfig=Object activeTab=0 resizeTabs=true, undefined, Object dom=div#ext-gen29.x-tab-panel-body id=ext-gen29)ext-all-debug.js (line 14096)
renderAll(Object initialConfig=Object resizeTabs=true, Object dom=div#ext-gen29.x-tab-panel-body id=ext-gen29)ext-all-debug.js (line 14212)
onLayout(Object initialConfig=Object resizeTabs=true, Object dom=div#ext-gen29.x-tab-panel-body id=ext-gen29)ext-all-debug.js (line 14076)
onLayout(Object initialConfig=Object resizeTabs=true, Object dom=div#ext-gen29.x-tab-panel-body id=ext-gen29)ext-all-debug.js (line 14174)
layout()ext-all-debug.js (line 14071)
setActiveItem(Object initialConfig=Object activeTab=0 resizeTabs=true)ext-all-debug.js (line 14205)
setActiveTab(Object initialConfig=Object activeTab=0 resizeTabs=true)ext-all-debug.js (line 18773)
onBeforeShowItem(Object initialConfig=Object activeTab=0 resizeTabs=true)ext-all-debug.js (line 18640)
fire()ext-all-debug.js (line 1504)
fireEvent()ext-all-debug.js (line 1201)
show()ext-all-debug.js (line 12466)
addTab2()test.html (line 109)
(no name)()test.html (line 79)
fire()ext-all-debug.js (line 1504)
fireDocReady()ext-all-debug.js (line 1541)
[Break on this error] var ow = this[ce].dom.offsetWidth;
ext-all-debug.js (line 18724)
this[ce] has no properties
autoSizeTabs()ext-all-debug.js (line 18724)
delegateUpdates()ext-all-debug.js (line 18714)
onResize()ext-all-debug.js (line 18675)
setSize(598, 243)ext-all-debug.js (line 13290)
setItemSize(Object initialConfig=Object activeTab=0 resizeTabs=true, Object width=598 height=243)ext-all-debug.js (line 14183)
onLayout(Object initialConfig=Object resizeTabs=true, Object dom=div#ext-gen29.x-tab-panel-body id=ext-gen29)ext-all-debug.js (line 14176)
layout()ext-all-debug.js (line 14071)
doLayout()ext-all-debug.js (line 13949)
fire()ext-all-debug.js (line 1504)
fireWindowResize()ext-all-debug.js (line 1739)
Event(resize )yui-utilities.js (line 11)
[Break on this error] var ow = this[ce].dom.offsetWidth;

Thanks in advance for any help.
T

devnull
6 Feb 2008, 9:13 AM
It seems like it should work, even though I cant think of a worse way of coding it...
This has me wondering, what are your includes?


Event(resize )yui-utilities.js (line 11)

w011117
6 Feb 2008, 10:05 AM
Can you suggest another way of coding this? I am new to Ext.

Thanks,
T

Condor
6 Feb 2008, 10:37 AM
1. addTab2 doesn't specify a title for the tabpanel (required for a tab).
2. tabPosition can be 'top' or 'bottom', but not 'footer'.
3. tabPosition:'bottom' and enableTabScroll:true don't work together (remove either one).

w011117
6 Feb 2008, 11:33 AM
Thanks Condor,
The missing title was the problem.....

T