See also

The guides will be updated soon. The holidays create challenges there but then again I imagine relatively few people will be looking at this for this time period.

Here is an excerpt from the new theme guide to describe the "themes as packages" structure. This will be further expanded in Cmd 3.1 but 3.0.2 should get themes reorganized along this path and that should carry forward well for future releases.

For many reasons, we want the Sencha Cmd tooling to be an enabler for people to create and ultimately share themes. The previous organization of a theme (inherited from Ext JS 4.0) made that difficult as there was no single root folder that contained all of that theme and only that theme.

In Cmd 3.0.2 and forward, themes are now contained in folders of their own in the "packages" folder. The theme formerly named "default" was renamed the "theme" package. So "resources/sass/default/app.scss" moves to "packages/theme/sass/app.scss".

    resources/              # Contains SASS source code and additional resources
        images/             # General image content (optional)
        theme/              # The compiled form of the default "theme"
            images/         # Unified image content generate by build process
            app.css         # The compiled theme
        red/                # The compiled form of other themes (by name)

    packages/               # Contains themes (the only packages for now)
        theme/              # The default theme (you can generate more here)
            images/         # Optional folder (content is copied if it exists)
            sass/           # sass input files for the default theme
                config.rb   # Compass configuration file
                app.scss    # Root SASS source for theme
            slice-src/      # Generated code for slicing (used by theme.html)
                ...         # See below for description of these files
            theme.html      # Web page for visual inspection and image slicing

        red/                # Other generated themes
            ...             # Contents are the same as the default "theme"

    build/                  # Build output
        appName/            # Build output for app
            production/     # Build output for "sencha app build production:
                resources/  # All files from "resources" folder
            testing/        # Build output (env = "production", "testing", etc.)
The important difference here is that "resources" now consists entirely of static resources. There is no "theme" folder to filter out, so all of the content of the resources folder is copied to the build folder.

The image build process for a theme is in 3 steps to produce the final content of "resources/theme-name/images":
  1. Copy in the images from the base framework theme.
  2. Generate image "slices" from the CSS3 rendering for use in IE (using "packages/theme-name/theme.html" and related files)
  3. Copy in the content of "package/<theme-name>/images" (if it exists).