PDA

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



incutonez
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(
'orange',
$button-small-border-radius,
$button-small-border-width,

$button-default-border-color,
$button-default-border-color-over,
$button-default-border-color-focus,
$button-default-border-color-pressed,
$button-default-border-color-disabled,

$button-small-padding,
$button-small-text-padding,

$orange-button-background-color,
$button-default-background-color-over,
$button-default-background-color-focus,
$button-default-background-color-pressed,
$button-default-background-color-disabled,

$button-default-background-gradient,
$button-default-background-gradient-over,
$button-default-background-gradient-focus,
$button-default-background-gradient-pressed,
$button-default-background-gradient-disabled,

$button-default-color,
$button-default-color-over,
$button-default-color-focus,
$button-default-color-pressed,
$button-default-color-disabled,

$button-small-font-size,
$button-small-font-size-over,
$button-small-font-size-focus,
$button-small-font-size-pressed,
$button-small-font-size-disabled,

$button-small-font-weight,
$button-small-font-weight-over,
$button-small-font-weight-focus,
$button-small-font-weight-pressed,
$button-small-font-weight-disabled,

$button-small-font-family,
$button-small-font-family-over,
$button-small-font-family-focus,
$button-small-font-family-pressed,
$button-small-font-family-disabled,

$button-small-icon-size
);


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'),
'orange',
$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?