View Full Version : Custom theming in Ext JS 4.1.1 with SASS/Compass.

13 Sep 2013, 7:36 AM
What I'm trying to do is create a new button style, using extjs-button-ui, and then apply that style to a button. The button's code is as follows:

xtype: 'button',
text: 'should be orange',
ui: 'orange'

My SASS code is as follows:

$button-default-background-color: mix(blue, red);
$orange-button-background-color: mix(yellow, red);
@import 'compass';
@import 'ext4/default/all';

@include extjs-button-ui(










I have a couple of questions/observations. When I compile this, I get no errors and the standard Ext JS theme with purple buttons, but the button I defined above, has no style... it's just text. These variables are all included in the _all.scss file, which imports the _variables.scss file, which includes the variable definitions that are in variables/_button.scss, and if the vars were undefined, the compiler would whine.

My first question is, why is this not working/what am I missing?

And my second, more broad SASS question, how do I inherit from a mixin? The orange include is actually inheriting all of those variables from the default-small extjs-button-ui. So I want the background-color and name to be orange, but I want everything else to be inherited from the default-small include. Is this possible? I thought something like:

@include extjs-button-ui(
@include extjs-button-ui('default-small'),
$button-default-background-color: mix(yellow, red)

would be the ticket, but I was apparently horribly wrong. I can inherit a mixin by doing something like:

.orange {
@include extjs-button-ui('default-small', $icon-size: 16px);
$button-default-background-color: mix(yellow, red);

But that's not creating an orange ui that I can use in Ext JS 4.1.1... just an orange CSS class that has the button values, but not my background-color. So what am I doing wrong? I've tried looking all over for ways to accomplish this, but nothing's working. Does anyone have any insight?