How to make the 'over' style of a toolbar button the default?

[BertrandF]

Hello,

I am using ExtJS 4.0.7. I would like to use the 'over' style as the default style for a toolbar button. I indeed find the default style too flat for an item to click.

When I initialise 'cls' of a button (located in a toolbar) to 'btn-default-toolbar-small-over', the 'over' style is applied and the button look good at first. However, if the mouse is flying over it, the style is set back to its default, flat look.

Any idea how I could use the 'over' style as the default for a toolbar button, and apply it globally?

Thank you,

Bertrand

[mitchellsimoens]

You need to use SASS/CSS to change the look of the button

[skirtle]

As Mitchell says, the correct way to do this using SASS/CSS.

However, I think there's a dirty hack...

Set the cls as you mentioned in your post. Also change the overCls so that moving the mouse over the button adds/removes some dummy class. That way the class you want won't be removed.

You can apply it globally by adding these configs to the button prototype but that will affect all buttons, not just toolbar buttons. You could use a beforerender listener in a controller to do it though, that can target just toolbar buttons. Even if you aren't using the MVC elsewhere you can pull in a controller just for this customization.

But as I said, this is a hack. SASS/CSS is the correct way to do it.