December 23, 2011

ExtJS SASS disabled button color bug


Bugs are everywhere but level 0 bugs kinda irritates you even more - such is the bug I want to discuss here.
As you know, ExtJS have SASS as the technology behind the framework's CSS. They did one hell of a job there, and so creating new custom themes is something that was made very easy.
Changing the color of a button text is somewhat elementary, when it comes to creating a new theme.
A part of it is changing the "disabled" state color on a button, which should be so trivial and shouldn't take more than a minute to implement. Alas, this is not the case for ExtJS.

You see, when you set the disabled color via the button ui mixin, you find out that it uses the "up" state color eventually.
Going into the code of the mixin, the cause reveals itself:

@if $color-disabled != $color {
color: $color !important;

See that? If the disabled color is not equal to the color, use the color? Definitely a copy/paste bug.
Check out this next post at Sencha forums, where you see that I'm not the first one to encounter it.
the code should actually look like this:

@if $color-disabled != $color {
color: $color-disabled !important;

So, first of all - I hope that this post will stop your frustration as to why is this happening, and secondly, I have a workaround (or two) that you might wanna use:
The simple solution is to override the ExtJS mixin in you own .scss and fix the bug.
Another solution really depends on whether you're building you project using some kind of a build technology which has an artifact dependency mechanism (Maven, Gradle, etc.), and then you can make the modification at the SDK and deploy it to you artifact repository, with a slight version update to differ it from the original SDK.


No comments: