[FIXED-107] Adding Panel to TabPanel

[tubamanu]

Hi Folks,

i'm trying to implement a simple sencha application with an tabpanel that contains two panels.
My Problem is that i cannot add any panels to my tabpanel. I used the function add and addDocked but nothings workes........

My Code is like this



cf.Main = function(){return {

theTabPanel :false,
theFirstPanel :false,
theSecondPanel :false,

init: function () {

this.initFirstPanel();
this.initSecondPanel();
this.initTabPanel();
this.theTabPanel.add(this.theFirstPanel);
},


initTabPanel: function () {
this.theTabPanel = new Ext.TabPanel({
fullscreen: true,
animation: 'slide'
});
},

initFirstPanel: function () {
this.theFirstPanel = new Ext.Panel({
title: 'Great Panel 1',
html: '!!!!!!!!!!!!!!'
});
},

initSecondPanel: function () {
this.theSecondPanel = new Ext.Panel({
title: 'Great Panel 2',
html: '????????????????'
});
}

};}();

[mrsunshine]

you have to do a doLayout after add() a panel to you tabpanel
try


this.initTabPanel.add(this.theFirstPanel);
this.initTabPanel.doLayout();

[tubamanu]

thx for your replay,

i tested doLayout() but it has no effect.

if i use


initTabPanel: function () {
this.theTabPanel = new Ext.TabPanel({
fullscreen: true,
animation: 'slide',
items:[item1, item2]
});
}


it works.

but in this way, it is hard to add dynamically TabItems^^

cheers from S

[mrsunshine]

Its a bug in Ext.TabPanel which occurs if you add a item after the TabPanel is rendered.

add the doLayout function to you tappanel configuration shut fix the problem


this.theTabPanel = new Ext.TabPanel({
fullscreen: true,
animation: 'slide',
doLayout: function() {
Ext.TabPanel.superclass.doLayout.call(this);
this.getTabBar().doLayout();
}
});


and than do the doLayout() call after you add a new item



this.theTabPanel.add(this.theFirstPanel);
this.theTabPanel.doLayout();

[TommyMaintz]

I am moving this thread to the bug forum and will make sure this is solved in our next release.

[tubamanu]

great :)

thx for your help :)