PDA

View Full Version : How to define a common size for each panel in a tabpanel



marxan
2 Sep 2010, 1:50 AM
Hello,

I'm trying to define all my panels with a common size as for the moment the size is made dynamically with the content.

I've tried to use the "width" option but nothing changes.

Anyone knows what I could do?

Thanks.

M.

evant
2 Sep 2010, 2:01 AM
A tab panel uses a card layout, so all items in the tab panel are sized to the same dimensions as the tab panel.

marxan
2 Sep 2010, 2:15 AM
A tab panel uses a card layout, so all items in the tab panel are sized to the same dimensions as the tab panel.

So I should configure the width in the tabpanel as below? But nothing changes, am I forgetting something?



var tb1 = new Ext.TabPanel({
renderTo: 'ECE',
id: 'tabpanel',
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:295,
enableTabScroll:true,
defaults:{autoHeight: true},
border : false,
plain: true,
items:[
{
xtype: 'panel',
id: 'title',
title: '-',
collapsed:true,
listeners:{activate: hideTab1 }
},
{
xtype: 'panel',
id: 'ECE',
autoLoad: {url: 'workbox1.cfm', params: 'bpcodeid=ECE', scripts: true},
title: 'Appointment Letters to Evaluation Experts.........................................................................................',
listeners:{activate: handleActivate1}
}
]
});
tb1.getTabEl('title').style.display = 'none';

function hideTab1(){
tb1.getTabEl('title').style.display = 'none';
}

function handleActivate1(tab){
tb1.getTabEl('title').style.display = '';
}

evant
2 Sep 2010, 2:17 AM
Yes, you should. Also wrong forum, moving.

marxan
2 Sep 2010, 5:12 AM
Which forum should I've been posting this question?
BTW: The code I showed doesn't work for the tabs resizing.

Animal
2 Sep 2010, 7:16 AM
You have to size that TabPanel.

Its layout manager sizes its children.

Condor
2 Sep 2010, 7:24 AM
What exactly are you looking for?

You configured the tabpanel items with autoHeight:true, so you are not actually looking for a common size of each tab.

marxan
2 Sep 2010, 10:37 PM
sorry I realize I misexpressed myself. What I want is to have a common size for the tab not for the panel. The size of a tab is defined by his content normally. For instance: if I have to 2 tabs: Tab1 title is "tab is very very long" . Tab2 title: "short".

The size of tab 2 will be much more smaller than tab1. What I want is to make tab2 the same size as tab1.

Hope I'm clear this time...

Animal
2 Sep 2010, 10:43 PM
Does't minTabWidth work?

marxan
2 Sep 2010, 11:35 PM
Nope :-(

minTabWidth works only if we put resizeTabs:true? Am I right? anything else to configure?

Condor
2 Sep 2010, 11:51 PM
Configure your tabpanel with:

cls: 'fixed-width-tabs'
and use:

<style type="text/css">
.fixed-width-tabs ul.x-tab-strip li {
width: 120px;
}
</style>

marxan
5 Sep 2010, 11:27 PM
It works, thanks for the help.

The code that works properly. This code displays a tab, when the user clicks on it, it displays the content and hide the current tab to display another one. By clicking to the new tab it reduce the content and display the other tabs.




var tb1 = new Ext.TabPanel({
renderTo: 'ECE',
id: 'tabpanel',
cls: 'fixed-width-tabs',
enableTabScroll:true,
defaults:{autoHeight: true},
border : false,
plain: true,
items:[
{
xtype: 'panel',
id: 'title',
title: 'Appointment Letters to Evaluation Experts',
iconCls: 'moins-icon',
collapsed:true,
listeners:{activate: hideTab1 }
},
{
//xtype: 'panel',
id: 'ECE',
autoLoad: {url: 'workbox1.cfm', params: 'bpcodeid=ECE', scripts: true},
title: 'Appointment Letters to Evaluation Experts',
iconCls: 'plus-icon',
listeners:{activate: handleActivate1}
}
]
});
tb1.getTabEl('title').style.display = 'none';

function hideTab1(){
tb1.getTabEl('title').style.display = 'none';
tb1.getTabEl('ECE').style.display = '';
}

function handleActivate1(tab){
tb1.getTabEl('title').style.display = '';
tb1.getTabEl('ECE').style.display = 'none';
}