ExtJS SASS disabled button color bug

Whud'up?

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.

Cheers

Displaying JS Code inside ExtJS TextArea

Hi guys,

Well, in this post I would like to talk about how to display a code snippet inside ExtJS. Say you want to create a panel where you can see a code snippet, copy/paste of whatever, but you want this code snippet to come from an actual file, in our case - JS file, and be loaded at runtime.
So, how do you do that?
It's pretty simple in the end, but finding and assembling the solution is not as trivial as you might think (and so I wish this post will turn future searches to be much faster than mine).
We're going to use a config property of the TextArea called "loader", which helps us in loading remote content to the TextArea. This loader can receive a URL to tell it from where to load the content and it has several predefined renderers that can be applied on the content and, well, render it accordingly.
Since we don't have a JS code renderer predefined, we can use a function instead of a String defining the renderer type, and in that function declare how we want the code to be rendered, which is mainly some indentations, at this point.
I used the code snippet from here to create the RegExp needed to render the code nicely (BTW, please find the ones who invented RegExp and electrocute them somewhere, ok?).
So with out further a due, here is the code for displaying a JS code inside an ExtJS TestArea.

xtype: 'textareafield',
autoScroll: 'auto',
width: '100%',
height: '100%',
loader: {
url: 'https://localhost/springapp/js/app/view/component/codesnippet.js',
autoLoad: true,
renderer: function(loader, response, active) {
var text = new String(response.responseText);
text = text.replace(/&/mg, '&');
text = text.replace(//mg, '>');
text = text.replace(/\"/mg, '"');
text = text.replace(/\t/g, ' ');
text = text.replace(/\r?\n/g, '
');
text = text.replace(/

/g, '
');
text = text.replace(/ /g, ' ');
loader.getTarget().update(text);
return true;
}
}

Cheers