PDA

View Full Version : How can I fit TabPanel into hBox panel with fixed width and auto height?



onv
22 Sep 2011, 5:42 AM
Hi all,

I'm new to Sencha Touch and don't know how I can fit TabPanel into hBox container with fixed width and auto height.
I need to create hBox layout which contains 2 items.
The first item is a TabPanel and it has fixed width. The second item is panel with property flex = 1.
Please see my configuration below:



App.Viewport = Ext.extend(Ext.Panel, {
id: 'viewport',
layout: 'card',
fullscreen: true,


initComponent: function () {
this.items = [
{ xtype: 'container', layout: { type: 'hbox', align: 'stretch' },
items: [
{
flex: 1,
xtype: 'tabpanel',
ui: 'dark',
sortable: true,
items: [
{
title: 'Tab 1',
html: '1',
style: 'background-color:#00F',
cls: 'card1'
},
{
title: 'Tab 2',
html: '2',
style: 'background-color:#0F0',
cls: 'card2'
},
{
title: 'Tab 3',
html: '3',
style: 'background-color:#F00',
cls: 'card3'
}
]
},
{ xtype: 'panel', flex: 1, html: 'content panel', style: 'background-color:#0FF' }
]
}
];


App.Viewport.superclass.initComponent.apply(this, arguments);
}
});




I expect that tabpanel will fit all available height of the hBox container.
Unfortunately in this case I can only see TabBar without TabPanel content.
I don't know how I can set height of the TabPanel manually because the height of the hBox will be different.

What am I doing wrong?

Thanks in advance!