parallax background

Custom themes in Ext 4.1 not generating images through slicing

Digital Transformation Group LinkedIn
Making a clickable image and/or making a clickable container (Ext JS 4.x)
May 3, 2012
Digital Transformation Group LinkedIn
Running Tomcat on HTTPS with a Secure Certificate on Dreamhost
August 1, 2012

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

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

	</target>
jvalentino
jvalentino
I live and work in the Dallas/Fort Worth area as a Principal Consultant for AppFoundation. I have been working with Java since 2000, Flex since it was in beta release, iOS development since 2008, and Sencha and Ext JS 4 since 2012. I have a Bachelor of Music with a double major in Music Performance and Music Composition, and a Bachelor of Science in Computer Information Science from Texas Christian University. I also have a Master of Science in Software Engineering from Southern Methodist University. I specialize in enterprise development, architecture, design, and continuous integration practices.

2 Comments

  1. Mark Doberenz says:

    Have you tested this with the recent 4.1.1 release and is this fix still needed?