View Full Version : Sencha Sliced Images Never Used Because of Compass Generated CSS Path Isn't Correct.

30 Jul 2012, 8:22 AM
Hello All,

I'm having difficulties understanding and successfully operating Sencha's Slice & SASS correctly.

After creating a custom theme configuration using my-ext-theme.scss, I've used Sencha Slice to auto build the custom UI images. These images are saved to appName/resources/images directory.

Now I've got cool images in a directory that makes sense to me; I mean, the images aren't nested somewheres deep within the SDK - Gee, that's great!.

And, Compass produces a customized CSS style sheet with all my unique UI properties applied. Hey, that's pretty cool too.

Now, here's were I need some explaination: When I open up the themed CSS file, I see references to images in SDK ONLY. I expected to see at least one style in the grenerated CSS file that references the images created by Sencha Slice - but, there aren't any.

This is a problem because to get the UI to look like I want, I will now need to pollute the SDK by customiZing Sencha's core image all because the SASS generated CSS incorrectly points to the SDK's images ( ie. url('../../extjs/resources/themes/images/default/form/trigger.gif' ) ie . In all the thousand of lines of CSS generated, nowhere is a reference to the Sencha Sliced images in "images/form/trigger.gif" which is what I expected to see.

Here's what I was thinking of doing but I don't want to:

1) Change Sencha's core images within the SDK. This pollutes the SDK and makes more work when upgrading to future versions of EXTJS...

2) I don't want to have to do a search and replace on ALL THE CSS generated by SASS to correct the image path to correspond to where Sencha Slice has placed images are.

Here's what I've done previously to fix this but neither solution below producted any changes I can see:

1) You will also need to copy the images fromappname/extjs/resources/themes/images/default to appname/resources/images. Ensure the path to your Ext JS folder is correct in appname/resources/sass/config.rb:
# $ext_path: This should be the path of the Ext JS SDK relative to this file$ext_path = "../../extjs"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_pathThis was from: http://www.sencha.com/learn/theming/. This didn't produce any changes to the CSS file that Compass generated; the file produced was identical to the perviously generated file with the incorrect paths... no image path changes happened so again, the Sliced images are never used.

2) Line 44(ish): Change relative_path = “../images/” to relative_path = “../themes/images/default”. This was from http://existdissolve.com/2011/09/extjs-4-theming-getting-this-thing-to-go/. I wasn't sure about this SASS change as it's not documented on Sencha's site. But, no matter, it didn't seem to make any difference anyway.

So, how's Compass and Slice really supposed to work; what should be the results of using these tools?