Thursday, July 5, 2012

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
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>

Contributors