PDA

View Full Version : [TabPanel] [TabBar] Playing around with CSS align center



gabrielstuff
6 Aug 2010, 6:06 AM
Hi All !

I've been trying to play around with the CSS stylesheet to do my own css style.
Actually I am looking to change the tab Panel look.

By default it is tab styled and not what I am looking for.
I would like to :

1. change the color and the shape of the tab = OK

adding some specific class and a CSS that override the original one with :


.x-tabbar {
padding-top: 0px !important;
border-bottom: 2px solid #306aa1 !important;
background-image:-webkit-gradient(linear, 0% 0, 0% 100%, from(#D7D9DA), color-stop(0.02, #8E9294), color-stop(0.5, #909497), color-stop(0.51, #888D90), to(#6F7376));
}

.x-tabbar.x-docked-top .x-tab {
color:#FFF;
text-shadow: #000 0px 1px 0px;
background-image:url(bouton_tab2.png);
}

.x-tabbar.x-docked-top .x-tab:before, .x-tabbar.x-docked-top .x-tab:after{
background-image:url(bouton_tab2.png);
}

2. I would like the tab to be :

left : OK (defaut)
right : NOK (right of the screen)
center : NOK (each button is equally centered)

Center is kind of the configuration that we have with the toolbar. When adding button they always go where there is space.

Here is the sample code I am using :


var panel = new Ext.TabPanel({
fullscreen: true,
layout: {
pack: 'justify',
align: 'center' // align center is the default
},
buttonAlign: 'left',
animation: 'slide',
items: [timeline, facebook],
cls: 'custom_class'
});


And also add :


tabBar.setCentered(true);
tabBar.doComponentLayout();


after :



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


But still, I do not get any centered element :(

As I can read in the doc :
http://www.sencha.com/deploy/touch/docs/?class=Ext.TabBar
and
http://www.sencha.com/deploy/touch/docs/?class=Ext.TabPanel

Any idea would be grateful !
Thank you by advance !

Gabriel

MattCobb
1 Sep 2011, 10:09 PM
tabBar: { layout: { pack: 'center' } }