PDA

View Full Version : Resize TabPanel



himalpatel
24 Feb 2012, 12:58 AM
How can I dynamically resize the width of a tabPanel ?

Thanks
Himal

vietits
24 Feb 2012, 1:11 AM
You can use <tabpanel>.setWidth()

himalpatel
24 Feb 2012, 1:13 AM
Thanks vietits,
Thanks for your prompt reply,
What i need to do is, it should resize it's width to 100%, every time i resize my browser. right now it doesnt. and it end up having white place on the right.

Thanks
Himal

vietits
24 Feb 2012, 1:26 AM
It depends on tab's container layout. Try to set container layout of tab to 'fit' and also remove width config from tabpanel setting.

himalpatel
24 Feb 2012, 1:29 AM
Here is the code that i have used, but no luck.

var tabs = new Ext.TabPanel({
renderTo: 'toptoolbar',
height: 116,
layout:'fit',
activeTab: 0,
defaults: {
bodyPadding: 10
},

toptoolbar is a div.

<div id='toptoolbar' style="height:116px; position:absolute; z-index:1000; left:0; top:0;width:100%">
</div>


Thanks
Himal

vietits
24 Feb 2012, 2:14 AM
Oh, 'toptoolbar' in your case is not a container I mentioned in my previous post. It's just an HTML element. The container I mentioned is an instance of Ext.container.Container class or its sub-class.

Let consider using Ext.container.Viewport (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.container.Viewport) and then put your tab inside this viewport. For example:


Ext.create('Ext.container.Viewport',{
layout: {
type: 'vbox',
align: 'stretch'
},
items: {
xtype: 'tabpanel',
height: 200,
items: [{
title: 'Tab 1',
html: "My content was added during construction."
},{
title: 'Tab 2'
},{
title: 'Tab 3'
},{
title: 'Tab 4'
},{
title: 'Disabled Tab',
disabled: true,
html: "Can't see me cause I'm disabled"
}]
}
});