PDA

View Full Version : Add Tabbar Icon without Masking



Jack9
25 May 2011, 3:33 PM
How do you get a flat icon in the tabbar? The masking doesnt look right for my app. I tried playing with the scss and recompiling, but I can't seem to find the right way to override the masking. I tried abusing the iconMask and ui at first, then the opacity rules in the scss with little to show for it.

Jack9
26 May 2011, 9:33 AM
Using a multicolored customIcon, added via SASS
I still end up with a masked image.

Removing any or all of the iconMask attributes have NO EFFECT, whatsoever.



Ext.setup({
onReady: function() {
var app = new Ext.TabPanel({
renderTo:Ext.getBody()
,tabBarDock:'bottom'
,tabBar:new Ext.TabBar({
iconMask:false
})
,iconMask:false
,fullscreen:true
,items:[
new Ext.Panel({
iconCls:'customIcon' //'action'
,iconMask:false
,html:'Panel 1'
})
,new Ext.Panel({
iconCls:'more'
,html:'Panel 2'
})
]
});
}
});


What do you have to do to get a normal colorized icon in the tabbar? Why doesn't iconMask work?

Jack9
26 May 2011, 10:37 AM
So using standard CSS to override the rules generated from SASS the mixins, I just mashed this out:

.x-tab.x-tab-active img.cusomIcon, .x-button img.x-icon-mask.cusomIcon {
background-image: url('/path/to/cusomIcon_selected.png') !important;
-webkit-background-size: 1.65em;
background-color:transparent !important;
}
.x-tab img.cusomIcon, .x-button img.x-icon-mask.cusomIcon {
background-image: url('/path/to/cusomIcon.png') !important;
-webkit-background-size: 1.65em;
background-color:transparent !important;
}

Oh well.