View Full Version : Using the Gray Theme as SASS base

11 Jun 2012, 9:20 AM
I am trying to setup my Ext project and we're beginning to use SASS. The tutorial I followed says to use the following config file

# $ext_path: This should be the path of the Ext JS SDK relative to this file$ext_path = "../../extjs-4.1.0"

# sass_path: the directory your Sass files are in. THIS file should also be in the Sass folder
# Generally this will be in a resources/sass folder
# <root>/resources/sass
sass_path = File.dirname(__FILE__)

# css_path: the directory you want your CSS files to be.
# Generally this is a folder in the parent directory of your Sass files
# <root>/resources/css
css_path = File.join(sass_path, "..", "css")

# output_style: The output style for your compiled CSS
# nested, expanded, compact, compressed
# More information can be found here http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style (http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style)
output_style = :expanded

# We need to load in the Ext4 themes folder, which includes all it's default styling, images, variables and mixins
load File.join(File.dirname(__FILE__), $ext_path, 'resources', 'themes')

which works, but it uses the "default" theme. Really I'd like to use a completely custom images directory when doing this, but I don't see how to do that. What is the best way to have SASS use a custom image directory for things like the trigger field icons and such?

11 Jun 2012, 9:28 AM
this helped...

$theme-name: 'gray';

is there a way to make this reference a folder outside the extjs folder without duplicating all of the SASS files?

11 Jun 2012, 9:35 AM
The theming guide (http://docs.sencha.com/ext-js/4-1/#%21/guide/theming-section-3) mentions you may need to update the ExtJS utils.rb file:

Due to a bug in Ext JS 4.0.2a you will also need to edit line 62 of appname/extjs/resources/themes/lib/utils.rb from this:

images_path = File.join($ext_path, 'resources', 'themes', 'images', theme)
to this:

images_path = relative_path
This ensures images will be served from appname/resources/images rather than appname/extjs/resources/images

11 Jun 2012, 12:23 PM
There are a couple blocks, what line do you do this on? line 60 or 62?

11 Jun 2012, 12:37 PM
For me, I simply comment out the old and insert the new. In context, it looks like this:

if relative
image_path = File.join(relative_path, theme, path)
# images_path = File.join($ext_path, 'resources', 'themes', 'images', theme)
images_path = relative_path
image_path = File.join(images_path, path)
Of course, you can modify it however you need in order to get the images directory where you like.