PDA

View Full Version : the width of tab bar not extend to screen width



goldfield
30 Oct 2011, 11:57 PM
I place tabPanel's tabBar on top postion and keep bottom style, so refer to this thread (http://www.sencha.com/forum/showthread.php?102839), and the display result is ok but the tab bar not extend all space, at the top right corner of page shows background. ( about 30px at my 1024px resolution). when use Chrome to view it, if I open Developer Tools and then close it, then tab bar becomes ok. (occupy all screen with). I try tabPanel.doLayout() or viewPort.doLayout(), both not works.

Please give any advice, Thank you !


var tabPanel = new Ext.TabPanel({
id:'tabPanel',
tabBar : {
dock : 'top',
layout : { pack : 'right' },
},
listeners: {
single: true,
afterlayout: function (panel) {
var dom = Ext.select('.x-docked-top', panel.getEl().dom).first().dom;
dom.className = dom.className.replace('x-docked-top', 'x-docked-bottom');
}
},
defaults: {
scroll: 'vertical'
},
cardSwitchAnimation: {
type: 'slide',
duration: 1
},
flex: 1,
ui: 'light',
items : [
{
iconCls : 'icon1',
items: [ scanPanel ]
},
{
iconCls : 'icon2',
items: [ logPanel ]
}
]
});

...


var viewPort = new Ext.Panel({
fullscreen : true,
layout : {
type : 'fit',
align : 'stretch'
},
items : [ tabPanel]
});

mitchellsimoens
31 Oct 2011, 5:14 AM
1. You're overnesting. Since your "Viewport" is a Panel using Fit layout, you can only have one item. Why not just have the TabPanel as your "Viewport"?

2. I haven't seen any problems with the TabBar not taking the correct width. Can you tell me more about what may be going on?