PDA

View Full Version : Problem dynamically adding tabs to TabPanel



qcardona
16 Apr 2011, 5:46 AM
Dear all,

I'm having a problem when I want to dynamically add tabs to a TabPanel from a function call.

I have this:


Ext.regApplication({
name: 'app',
launch: function() {
console.log('launch');
this.views.viewport = new this.views.Viewport();
this.views.viewport.begin();
}
});

app.views.Viewport = Ext.extend (Ext.TabPanel, {
id: 'Viewport',
fullscreen: true,
layout: 'fit',

tabBar: {
dock: 'bottom',
layout: { pack: 'center' }
},

begin: function () {
console.log ('viewport.begin');

this.add ({
title: 'Tab1',
iconCls: 'download',
html: 'card1'
});

this.add ({
title: 'Tab2',
iconCls: 'download',
html: 'card2'
});

this.doLayout();
}
});


It works but horizontal and vertical scrollbars appear and layout looks ungly.

However, if I add a previous item in the panel definition:


items: [ { title: 'Tab0', iconCls: 'download', html: 'card0'} ],

it works absolutely fine.

I don't want to use initComponent as I want to create them later.

Thanks in advance.