Custom themes in Ext 4.1 not generating images through slicing

From http://www.appfoundation.com/?p=493

Custom theme slicing is not generating images in 4.1 as it did in 4.0.

In 4.0 assuming a directory structure like the following:

• app - Contains the app source
• extjs - Contains the Ext JS Framework
• resources
• css - Intended to contain generated css
• images - Intended to contain generated images
• sass
• _myapp-buttons.scss
• config.rb
• my-ext-theme.scss
• maniest.json - Specifies the custom components for which to generate images
• app.js

Whenever you run the "compass compile" on the project, you get the expected css file generated in the css directory:

• app
• extjs
• resources
• css
• my-ext-theme.css - The generated theme css
• images
• sass
• _myapp-buttons.scss
• config.rb
• my-ext-theme.scss
• maniest.json
• app.js

If you look at my-ext-theme.css when using 4.0, you will see the following:

• framework items are located at ../../extjs/resources/themes/images
• custom theme items are located at ../images

If you look at my-ext-theme.css when using 4.1, you will see the following:

• framework items are located at ../../extjs/resources/themes/images/default
• custom theme items are located at ../images/default

So between 4.0 and 4.1 images moved from images to images/default

When you run the slicing tool on the project (ext-theme.exe on Windows) out of Sencha SDK Beta Tool 3 on 4.0 you get the following:

• app
• extjs
• resources
• css
• my-ext-theme.css
• images
• btn
• btn-custom-small.bg-gif
• btn-custom-small-corners.gif
• btn-custom-small-sides.gif
• sass
• _myapp-buttons.scss
• config.rb
• my-ext-theme.scss
• maniest.json
• app.js

When you run the slicing tool on the project  (ext-theme.exe on Windows) out of Sencha SDK Beta Tool 3 on 4.1 you get the following:

• app
• extjs
• resources
• css
• my-ext-theme.css
• images - Nothing is generated
• sass
• _myapp-buttons.scss
• config.rb
• my-ext-theme.scss
• maniest.json
• app.js

No images are generated. What happened?

After poking through the extjs framework directory for things like "default" and "images" nothing stood out. After having already spent quite a bit of time on this, and being on the last week of a particular project, I was left with a few choices:

1. Fix something in the framework
2. Ask around to find if someone else has an answer
3. Implement a hack, and correct it later

So here is the hack:

1. Compass compile the SCSS into CSS (doesn't involve the extjs directory)
2. Slice the theme against the Ext 4.0 framework
3. Copy directories from resources/images into resources/images/default
4. Delete the directories that you copied out of resources/images

My Ant code looks like the following:

<target name="slice-theme-hack">
<!-- An ant macro around compass compile -->
<af-sencha-compile-sass-into-css
sencha-resources-dir="${basedir}/WebContent/resources"
/>
<!-- An ant macro around slicing themes -->
<af-sencha-slice-theme
sencha-extjs-dir="${basedir}/theme-hack/extjs-4.0"
sencha-resources-dir="${basedir}/WebContent/resources"
theme-css="my-ext-theme.css"
manifest-json="manifest.json"
/>
<copy todir="${basedir}/WebContent/resources/images/default">
<fileset dir="${basedir}/WebContent/resources/images/">
<exclude name="default/**">
<exclude name="*.*">
</exclude></exclude></fileset>
</copy>
<delete includeemptydirs="true">
<fileset dir="${basedir}/WebContent/resources/images/">
<exclude name="default/**">
<exclude name="*.*">
</exclude></exclude></fileset>
</delete>
</af-sencha-slice-theme
</af-sencha-compile-sass-into-css
</target>