Changes to organization of Ext JS Themes in Cmd 3.0.2

Changes to organization of Ext JS Themes in Cmd 3.0.2

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

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

Copy in the images from the base framework theme.

Generate image "slices" from the CSS3 rendering for use in IE (using "packages/theme-name/theme.html" and related files)

I downloaded Cmd 3.0.2 and was able to create a custom theme perfectly except for 1 thing. The Panel headers continue to use the default theme blue gradient only in IE6-IE9. It works perfectly in Chrome, Firefox and Safari. To illustrate this better I used really dark colors so I could easily see how each element in the theme was being affected. I found this a really good way to learn how to build custom themes.

I have tried this on much more complex views and everything works except for the Panel header background in IE9. I can see all the sliced images in the images folder so I know the slicing is working too it just seems like this one piece is missing.

I was able to figure this out. It turns out that IE9 does not always refresh 100% and the only way to completely refresh it is to close and reopen IE9. That was throwing me because Firefox, Chrome and Safari all refresh and show the updates CSS without closing.

Another thing I had to do was set more of the SASS variables. For anyone else that is interested here are that changes to get the Panel header to change.

Show how to build and view the 2 generated apps, and show that they are using a shared theme

A 3rd app is added - sencha cmds are shown and we see how to change the 3rd app to make use of the global theme

We can now load the final built app and switch between the 3 extjs apps / pages

Source code is provided for download

I appreciate that this may be a bit of effort but it should have the following advantages to you:
1. It will succinctly demonstrate senchacmd usage
2. It will provide a reference architecture/template for developers for what I believe must be the most common webapp design pattern
3. It will provide a base test app which future theme developers can drop their themes into, and help pave the way for future outsourcing of theme design by developers
4. No doubt the structure of extjs workspaces/apps and the senchacmd will evolve - this will give you an easy way to explain the changes

The changes to this structure in 3.0.2 were to prepare the way for a resolution to this issue of theme creation and sharing. This will be available very soon as part of the Ext JS 4.2 beta with the introduction of Sencha Cmd 3.1.

We are still ironing out the details of this as it relates to Ext JS 4.1.x because to make this really work well we needed to change the structure of our SASS and resources to be more like what you see in Cmd 3.0.2. This probably means that the upcoming beta of Cmd 3.1 will not have improvements in this area for Ext JS 4.1.x apps but perhaps we can find a way to share some of that with the old theme structure for 3.1 GA.