PDA

View Full Version : Adding Custom icon in the tab bar



anishkumar
24 Oct 2010, 9:02 PM
Hello,I am trying to add custom icon in the toolbar.but it seems not working.i tried background-image instead of -webkit-mask-box-image.but this doesn't helps me....any ideas????

gabrielstuff
25 Oct 2010, 3:16 AM
Yes, show us your CSS, also take a quick look in the search result :

http://www.sencha.com/forum/showthread.php?102690-tabbar-icon&highlight=icon
http://www.sencha.com/forum/showthread.php?109948-iconMask-not-working-in-0.95&highlight=icon

Personnaly I do this :
1. adding class to myPanel:

iconCls: 'icnHom',

Then in the CSS :

.icnHom {
-webkit-mask-box-image: url(data:image/png;base64,iVBORw0KGg..../LHEKZXOUWaBm2Pk95DylTf);}

peterkuli
25 Oct 2010, 9:35 AM
Hello Gabriel,

How do I use the standard icons? If I do something like this (dockedItems of a panel):


items: [{
iconCls: 'info',
title: 'Info'
}]

I dont get the standard info-icon. Do I have to add the class to my custom CSS as you described? If yes, how do I become the url tag?

tanjuGMX
12 Nov 2010, 7:25 PM
how do I become the url tag?
Inside the "URL tag" is a base64 encoded image. You can go to
http://www.greywyvern.com/code/php/binary2base64

Just enter the URL where you store the image and it translates it to base64 :D

ereztison
28 Mar 2012, 4:36 AM
in the .js file:


{
xtype: 'tabbar',
id: 'bottom-tab-bar',
ui: 'dark',
docked: 'bottom',
layout: {
pack: 'center',
align: 'center'
},
items: [{
id: 'contacts-tab-button',
cls: 'selected',
labelCls: 'tab-button-label',
title: 'Contacts',
},
...and so on with the other tabs
}


and in the css file:


#bottom-tab-bar {
border-top: none;
background-image: url('/sencha/resources/images/bottombar_background.png');
background-repeat: no-repeat;
background-size: cover;
background-color: transparent;
}


/* control the active state of the child tabs */
#bottom-tab-bar .x-tab-normal {
/* required for setting the image to our custom one */
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
background-size: 38px 38px;

/* controls the label color */
text-align: center;
color: light-blue;
}


/* control the active state of the child tabs */
#bottom-tab-bar .x-tab-active {
/* required for hiding the selected state box */
border: none;
box-shadow: none;
-webkit-box-shadow: none;
}


.tab-button-label {
font-size: 0.5em;
color: light-blue;
}


#contacts-tab-button {
background-image: url('/sencha/resources/images/bottombar_contacts_icon_normal.png');
}


#contacts-tab-button.selected {
background-image: url('/sencha/resources/images/bottombar_contacts_icon_selected.png');
}