PDA

View Full Version : TabPanel tab text align property?



brunofin
15 Jul 2014, 9:55 AM
I'm trying to achieve something that essentially looks like this, but using a TabPanel rather than simple buttons in ExtJS 4.2.0.

49665


But I can't find the configuration or property to align the text of the tab, like buttons do have (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.button.Button-cfg-iconAlign) in ExtJS.
This is the furthest I achieved so far:

49666


Is it possible?

brunofin
15 Jul 2014, 10:00 AM
OK, I have found the iconAlign (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.button.Button-cfg-iconAlign) property of the tab (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.tab.Tab), but I still didn't manage to make it work.

Tried like this:


items: [
{
title: 'Home',
disabled: true,
iconCls: 'bxConfigCamSnapshotFTP',
iconAlign: 'top',


},
]


And like this:


defaults: {
iconAlign: 'top',
},
items: [
{
title: 'Home',
disabled: true,
iconCls: 'bxConfigCamSnapshotFTP',


}
]


Any ideas?

Gary Schlosberg
16 Jul 2014, 7:10 AM
Looks like the iconAlign issue is a known issue (EXTJS-11031) which unfortunately hasn't yet been resolved.

brunofin
17 Jul 2014, 6:09 AM
I fixed this behaviour using pure CSS.
First you need to set a CSS class to the TabPanel in the JS code:



{
xtype: 'tabpanel',
tabPosition: 'bottom',
cls: 'myTabPanel',


items: [
...
]
}



And then set these CSS properties:



.myTabPanel .x-tab-inner.x-tab-inner-center {
padding-left: 0px !important; /* removes the text's padding */
padding-top: 40px !important; /* don't set this property if you want text on top of the icon */
}


.myTabPanel .x-tab-icon-el {
left: 0px !important;
width: 48px; /* set this for your image's width */
height: 48px; /* set this for your image's height */
margin-left: 5px; /* if your text is on top of the icon it's also interesting to add some spacing between them with margin-top: 5px; */
}




.myTabPanel .x-tab {
padding: 2px !important; /* if you want your tabs to look smaller, also use this */
}


.myTabPanel .x-tab-inner, .myTabPanel .x-box-scroller {
font-size: 8.5px;
font-weight: lighter;
height: 58px; /* tune this value to match the height you want your tab to have */
width: 60px; /* tune this value to match the width you want your tab to have */
}


The final result:

49694

Hope this can help anyone who needs or even solve the mentioned bug. :)