PDA

View Full Version : TabPanel toolbar icon positioning in PR3



parky128
12 Dec 2011, 7:52 AM
I have noticed that since switching to PR3 the positioning of icons for tabs on my tabPanel are now aligned to the left and not centered as they used to be in PR2.

I scanned the release notes to see if there are any new config params but couldnt spot anything, what do I need to do to get the icons centered once again?

Thanks

mitchellsimoens
12 Dec 2011, 8:55 AM
Simple test case?

parky128
12 Dec 2011, 8:59 AM
Here you go:


Ext.define('PinpointersTouch.view.MainView', {
extend: 'Ext.TabPanel',
xtype: 'mainview',
requires: [
'PinpointersTouch.view.UnitList',
'PinpointersTouch.view.GMap'
],


config: {
//_loginWin: null,
fullscreen: true,
tabBarPosition: 'bottom',
layout: {
//type: 'card',
animation: {
type: 'fade'
}
},
items: [
{
title: 'Home',
iconCls: 'home',
html: [
'<h1>Welcome to Pinpointers Touch</h1>'
].join("")
}, {
xtype: 'unitslist',
title: 'Locations',
iconCls: 'locate',



}, {
xtype: 'gmap',
title: 'Map',
iconCls: 'maps',



},{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
defaults: {
iconMask: true
},
items: [
{ xtype: 'spacer' },
{ iconCls: 'refresh', itemId: 'btnRefresh' },
{ iconCls: 'user', itemId: 'btnUserLogout' },
{ iconCls: 'settings' }
]
}
]
}
});

mitchellsimoens
12 Dec 2011, 9:01 AM
You mean the tabs themselves centered in the tab bar?


var tabpanel = Ext.create('Ext.tab.Panel', {
fullscreen : true,
tabBar : {
docked : 'bottom',
layout : {
pack : 'center'
}
},
items : [
{
title : 'Tab One',
tabProp : 'one'
},
{
title : 'Tab Two',
tabProp : 'two'
}
]
});

parky128
12 Dec 2011, 9:05 AM
Ahh! My bad, thanks for this all sorted now.