PDA

View Full Version : control icon color



openthesky7
20 Jan 2011, 7:45 AM
When I create button:


{
xtype: 'button',
iconCls: 'arrow_left',
iconMask: true,
width: 64,
height: 22,
}

icon picture will be black.

Any idea how to change the color?

runner
20 Dec 2011, 1:32 PM
The icon mask matches the color of the button font. You can override the style this way:



.myIconStyle .x-icon-mask{background:green !important;}


Of course gradients work too:


.myIconStyle .x-icon-mask{
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#22AB07), to(#1B6B1B), color-stop(.3,#A9D6AE)) !important;
}


Button Code looks like this:


text: 'Ready',
id:'readyButton',
iconMask: true,
iconCls: 'check_black2',
ui: 'normal'


Now you can change the color of the icon mask using this technique:

Ext.getCmp('readyButton').addCls('myIconStyle');

My example is set up to load the default icon mask style and then when validation is true it changes the check mark to green.

30198