Sencha ExtJS 4 standard theming workaround when SASS variables don't compile correct CSS

0
votes

I'm finding several variables in SASS, defined in my *.scss theme file, that do not compile the correct CSS based on their name when building the application in Sencha Cmd using "sencha app build". All I want to do is have a default color, a default background-color, and a few other variations whenever an event occurs such as over, focus, pressed and disabled. And then make sure they apply to all components (form field, combo, grid cell, tree node, etc..). I found some examples below, and only a fraction of these SASS variables actually worked for me.

For the SASS variables that are broken in Sencha Cmd, what is the simplest way to apply themes for all components using standard Sencha functionality? And can you give a couple examples?

Example web pages that I found some SASS variables:

https://github.com/mkalafior/extjs4-zend-json-server/tree/master/public/packages/ext-theme-neutral/sass/src

click any of the *.scss files to see the SASS variables

http://zachowen.wordpress.com/2012/09/10/custom-theming-for-extjs-4-part-1-buttons/

$border-radius: 0px,
$border-width: 3px,

$border-color: #900 #500 #500 #900,
$border-color-over: #A00 #700 #700 #A00,
$border-color-focus: #A00 #700 #700 #A00,
$border-color-pressed: #500 #900 #900 #500,
$border-color-disabled: #F6D600 #A66600 #A66600 #F6D600,

$padding: 3px 0,
$text-padding: null,

$background-color: #a00,
$background-color-over: #c00,
$background-color-focus: #c00,
$background-color-pressed: #700,
$background-color-disabled: #FEBF00,

$background-gradient: null,
$background-gradient-over: null,
$background-gradient-focus: null,
$background-gradient-pressed: null,
$background-gradient-disabled: null,

$color: #F6D600,
$color-over: null,
$color-focus: null,
$color-pressed: #100,
$color-disabled: #500,

$font-size: 11px,
$font-size-over: 11px,
$font-size-focus: 11px,
$font-size-pressed: 11px,
$font-size-disabled: 11px,

$font-weight: bold,
$font-weight-over: bold,
$font-weight-focus: bold,
$font-weight-pressed: bold,
$font-weight-disabled: bold,

$font-family: sans-serif,
$font-family-over: sans-serif,
$font-family-focus: sans-serif,
$font-family-pressed: sans-serif,
$font-family-disabled: sans-serif,

$icon-size: null
1
cssextjsthemessasssencha-cmd
What do you mean by "broken variables?" Does the build fail with an error? Or do the styles get ignored in the resulting css? – Towler
@Tower - the styles get ignored in the resulting css .. two styles that I can't seem to find the appropriate SASS variables for are combo options when you hover and focus on them (color not background-color) and form fields when you hover and focus on them (background-color not color). – MacGyver
There's only 2 options open to you if the configuration variables don't do what they're supposed to: file a bug report with the library maintainer (Sencha or whoever) so they can fix it or fork the project and fix it yourself. – cimmanon

1 Answers

0
votes

Looks like you're inventing some non-existing global SASS variables. I would suggest reading the Theming guide first, then taking a look at the components' documentation to see which SASS variables they support, and changing these variables to suit your needs either in a new theme, or in the application SASS.