PDA

View Full Version : Trouble with tabbar and orientation



dario
7 Feb 2011, 3:42 AM
Hi

I have a problem in my app (http://www.fanotv.it/touch2): if you change the orientation the bottom tab bar is displayed in the middle of the page and it is not docket on the bottom.

My main panel code looks like this:



fanotv.App = Ext.extend(Ext.TabPanel, {
layout: 'card',
layoutOnOrientationChange:true,
fullscreen: true,
cardSwitchAnimation: { type: 'slide', cover: false },

initComponent: function(){
this.backButton = new Ext.Button( {
ui:"back",
text:'indietro',
hidden:true,
handler: function (){
fanotv.newsPanel.setActiveItem('newslist', {type: 'slide', direction:'right'});
this.hide();
}
});

fanotv.topBar = new Ext.Toolbar ({
dock: 'top',
title: 'FANO TV',
ui:"dark",
items: [this.backButton]
});

fanotv.newsPanel = new fanotv.NewsPanel({
title: 'Home',
iconCls: 'home',
id:'tab_home'
});

fanotv.searchPanel = new fanotv.SearchPanel({
title: 'Archivio',
iconCls: 'news',
id:'tab_search'
});

fanotv.meteoPanel = new fanotv.MeteoPanel({
title: 'Meteo',
iconCls: 'meteo',
id:'tab_meteo'
});

fanotv.infoPanel = new fanotv.InfoPanel({
title: 'FanoTv',
iconCls: 'info',
id:'tab_info'
});

fanotv.creditsPanel = new fanotv.CreditsPanel({
title: 'Crediti',
iconCls: 'credits',
id:'tab_credits'
});

Ext.apply(this, {
items: [ fanotv.newsPanel, fanotv.searchPanel , fanotv.meteoPanel, fanotv.infoPanel, fanotv.creditsPanel ],
tabBar: {
dock : 'bottom',
//ui:"dark",
//layout: { pack: 'center' },
listeners: {
change: function (tabbar,tab,card) {
if(card.id=="tab_home")
{
Ext.getStore('NewsListDataStore').load();//caricamento dati con parametri di default
fanotv.newsPanel.setActiveItem('newslist', {type: 'slide', direction:'left'});
}

if(card.id=="tab_search")
fanotv.searchPanel.setActiveItem('searchform', {type: 'slide', direction:'left'});

fanotv.topBar.items.getAt(0).hide();
}
}
},
dockedItems: [ fanotv.topBar]
});
fanotv.App.superclass.initComponent.apply(this, arguments);
}
});


and as you can see it shows different panels as content but all of them have the same problem...any hint?
Thanks
Dario

dario
8 Feb 2011, 2:02 AM
I just noticed that if the page is initially opened in landscape mode, it is shown correctly; however if I turn my iPhone to portrait mode, the tab panel is messed up with the bottom tab bar shown in the middle of the screen. If I switch back to landscape, it is displayed correctly.

It seems that only the mode which is initially shown is displayed correctly on every orientation changed...any hint?

irocker
8 Feb 2011, 9:58 AM
I seem to have dealt with a lot of these type of issues by always specifying the layout of a TabPanel as "fit". Any other type of layout that is needed, such as "card", I set in the individual items within the TabPanel.

I'm still struggling to understand all the ins and outs of Sencha layouts, but that seems to have mostly solved my similar issues.

Bucs
8 Feb 2011, 10:35 AM
Also, what version of Touch are you using? There were a lot of bugs in the 1.0.1 and below with the viewport. Upgrading to 1.0.2 will fix most of those issues...but you need to be a paid support subscriber or you'll have to wait until the public release of 1.0.2.

dario
9 Feb 2011, 6:04 AM
Hi Bucs
I'm using vers 1.0.1.
Anyway I just found a bug in one of the components shown in the tab panel, which had a layout set to "fit" instead of "card"; now the problem seems to be fixed.
Thank you

Bucs
9 Feb 2011, 6:07 AM
Ok cool. But I think if you keep banging on that version (i.e. phone rotation, page sleep, etc.) you will see it again unfortunately...at least I did. Only the upgrade to 1.0.2 permanently fixed it for me. But hey, if it's working, don't mess with it!