Custom themes in Ext 4.1 not generating images through slicing

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

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

       <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="*.*" />
			</fileset>
		</copy>

		<delete includeEmptyDirs="true">
			<fileset dir="${basedir}/WebContent/resources/images/" >
				<exclude name="default/**" />
				<exclude name="*.*" />
			</fileset>
		</delete>

	</target>