PDA

View Full Version : Ext.TabPanel addDocked cannot align on the right the image



george1981
20 Oct 2010, 8:59 AM
Hi guys, hope is the right place for this issue..
I am new to Sencha Touch and i find it great, btw while I was writing a small app (very basic) I encountered an issue while I try to place a refresh button on the right of the TabBar, more or less in the same way it is done on the geotwitter sample app.
What happens is: when i open the app the first time the image is on the left of the tabbar, then if i put the iphone horizzontaly it moves on the right (but is not centered) and if i put it vertically again it stays on the right (still not centered). Any suggestion is very appreciated ! :)
here's the code:
Ext.setup({
tabletStartupScreen: 'big.png',
phoneStartupScreen: 'small.png',
icon: 'icona.png',
glossOnIcon: false,

onReady: function () {
var panel, aboutMe, refresh, tabBar, timeline, buttonRefresh;

aboutMe = {
title: "About",
html: "Hello there"
}

timeline = new Ext.Component({
title: "Quotes",
cls: 'timeline',
tpl: ['{quoteContent}']
});


panel = new Ext.TabPanel({
fullscreen: true,
animation: 'slide',
items: [aboutMe, timeline]

});


refresh = function () {
$.ajax({
type: "POST",
url: "/Services/QuotesService.svc/GetQuote",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
timeline.update(msg.d);
}
});
}


tabBar = panel.getTabBar();
tabBar.addDocked({
xtype: 'button',
ui: 'plain',
iconCls: 'refresh',
iconMask:true,
dock: 'right',
stretch: false,
align: 'center',
handler: refresh
});


refresh();

}
});

thanks in advance !

blessan
20 Oct 2010, 5:06 PM
try tabBar.doComponentLayout() after adding or insert a {xtype:'spacer'}. It will take of the remaining space.

george1981
21 Oct 2010, 4:53 AM
Hi blessan, thanks for your reply!
Unfortunely I wasn't able to fix it, i tried even by adding a spacer before the refresh button.
Btw seems the same issue is present on the geotweet sample on the Sencha website (dev.sencha.com/deploy/touch/examples/guide). I am browsing it with an ipad and the refresh button is placed on the left on the first load of the app, maybe a bug ?
Cheers

anassirk
24 Oct 2010, 6:50 AM
Hi blessan, thanks for your reply!
Unfortunely I wasn't able to fix it, i tried even by adding a spacer before the refresh button.
Btw seems the same issue is present on the geotweet sample on the Sencha website (dev.sencha.com/deploy/touch/examples/guide). I am browsing it with an ipad and the refresh button is placed on the left on the first load of the app, maybe a bug ?
Cheers

Same here. More info: if I rotate my iPad the button will be docked on the right correctly